CSS3 动画从右到左滑动 div 表单 Onclick of button

Question

我试图在单击时从右向左滑动一个 div。并关闭它，在单击关闭按钮时再次向右滑动使用 CSS3 过渡和动画。

这是小提琴的链接：单击此处

示例 CSS：

.selected {
   animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.dismiss {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

有人可以解释我在这里做错了什么吗？以及如何解决？

谢谢

Answer 1

$('#showFilePanel').click(function(event) {
  if ($('.notification-container').hasClass('dismiss')) {
    $('.notification-container').removeClass('dismiss').addClass('selected').show();
  }
  event.preventDefault();
});

$('#closeFilePanel').click(function(event) {
  if ($('.notification-container').hasClass('selected')) {
    $('.notification-container').removeClass('selected').addClass('dismiss');
  }
  event.preventDefault();
});

html,
body {
  overflow: hidden;
  max-width: 100%
}

.notification-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  display: none;
  height: 100%;
  overflow: hidden;
  background: #107b10;
  z-index: 999;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.selected {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.dismiss {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}

@-webkit-keyframes slide-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(100%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="notification-container dismiss">
</div>

<a id="showFilePanel">Open</a>
<a id="closeFilePanel">Close</a>

您正在使用selected，并dismiss作为一个animation-name错误，改变动画名到你没有真正定义动画的名称：

.selected {
   animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.dismiss {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
   0% { -webkit-transform: translateX(-100%); }
   100% { -webkit-transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
     0% {transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}

将（@keyframes 关闭和@keyframes 选择）更改为（@keyframes 滑入和@keyframes 滑出）

编辑：添加片段以从右侧打开和关闭。