动画 CSS 个关键帧回到初始状态

Question

我查看了 SO 答案 (, , )，但仍然无法让我的动画正常工作。我有一个简单的关键帧，它最初可以很好地设置动画，但在切换 hidden class 时不会设置 back/forth 动画，它使用 animation-direction: reverse 将元素隐藏回关键帧的初始状态。

我想在单击显示按钮时将元素设置为 translateY(0%) 的动画，并在单击隐藏按钮时将元素设置为 translateY(-50%) 的动画，但 animation-timing-function: ease 没有正确应用因此没有动画。我还需要为此使用关键帧，因为我稍后会制作更复杂的转换动画。

这是我拥有的：

$('#show').on('click', function() {
 $('#slide').removeClass('hidden');
});
$('#hide').on('click', function() {
 $('#slide').addClass('hidden');
});

#slide {
  background: #333;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  width: 200px;
  padding: 20px;
  margin-bottom: 30px;
  display: block;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-duration: 0.4s;
  animation-delay: 0s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
#slide.animation1 {
  animation-name: slide;
}
#slide.hidden {
  animation-direction: reverse;
}
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide" class="animation1">
  <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p>
</div>
<button id="show">Show</button>
<button id="hide">Hide</button>

Answer 1

您不必为此使用 @keyframes。您已经使用 jQuery 添加和删除 classes，因此您也可以使用 jQuery 添加一个 class onLoad 然后只使用 translateY

首先，您在默认状态下设置 translateY(-50%)，在加载时添加 class animation1 并在 class 中添加 css，您设置translateY(0).

然后点击 hide 按钮添加 class hidden （就像你现在做的那样），然后在 css 中添加 translateY(-50%) .

这将实现你想要的

请参阅下面的代码片段，如果这就是您要查找的内容，请告诉我

$(window).on("load", function() {
  $("#slide").addClass("animation1")
  $('#show').on('click', function() {
    $('#slide').removeClass('hidden');
  });
  $('#hide').on('click', function() {
    $('#slide').addClass('hidden');
  });
});

#slide {
  background: #333;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  width: 200px;
  padding: 20px;
  margin-bottom: 30px;
  display: block;
  transform: translateY(-50%);
  transition: 0.3s;
}

#slide.animation1 {
  transform: translateY(0%)
}

#slide.hidden {
  transform: translateY(-50%)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide" >
  <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p>
</div>
<button id="show">Show</button>
<button id="hide">Hide</button>

Answer 2

为此您需要 2 个不同的动画。只是改变方向不会重新触发动画。

例如：

$('#show').on('click', function() {
 $('#slide').removeClass('hidden');
});
$('#hide').on('click', function() {
 $('#slide').addClass('hidden');
});

#slide {
  background: #333;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  width: 200px;
  padding: 20px;
  margin-bottom: 30px;
  display: block;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-duration: 0.4s;
  animation-delay: 0s;
  animation-timing-function: ease;
  animation-fill-mode: both;
        opacity: 0;
        transform: translateY(-50%);
}
.animation1 {
  animation-name: slide;
}
#slide.hidden {
  animation-name: slide2;
}
@keyframes slide {
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
@keyframes slide2 {
    from {
        opacity: 1;
        transform: translateY(0%);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide" class="animation1">
  <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p>
</div>
<button id="show">Show</button>
<button id="hide">Hide</button>

动画 CSS 个关键帧回到初始状态

Animate CSS keyframes back to initial state

css

keyframe

css-animations