Question

我试图点击从右到左滑动div。然后关闭它，再次单击关闭按钮将其向右滑动使用CSS3过渡和动画。

以下是小提琴的链接：Click Here

示例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

＆＃13;

$('#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();
});

＆＃13;

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%);
  }
}

＆＃13;

<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>

＆＃13;

您误将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 dismiss ＆amp; @keyframes selected ）到（ @keyframes slide-in 和 @keyframes slide-退出）

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

CSS3动画从右到左滑动div形式按钮Onclick

1 个答案: