下一个按钮触发 Css 动画

Question

我点击了网站内的动画。

目前一切都按计划进行，但存在可用性问题。

我已将动画设置为在 div 框 clicked 后激活。当用户没有直接点击 div 时，一切都会崩溃。

看看我创建的这个示例，请注意，如果您不单击圆圈，它就会出现问题。 — https://jsfiddle.net/ym2f50pq/11/

我想知道的是，是否可以添加一个 'next' 按钮来依次激活每个动画。

HTML 看起来像这样：

<div class="z1 animation-1" style="background-image:url('name_of_image.jpeg')"></div>
<div class="z2 animation-2" style="background-image:url('name_of_image.jpeg')"></div>
<div class="z3 animation-3" style="background-image:url('name_of_image.jpeg')"></div>
<div class="z4 animation-4" style="background-image:url('name_of_image.jpeg')"></div>

CSS 看起来像这样：

.z1{ 
  z-index:99;
}
.z2{ 
  z-index:98;
}
.z3{ 
   z-index:97;
}
.z4{ 
  z-index:96;
}

.animation-1 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
  position: absolute;
}
.is-open-animation-1 {
  animation: animation_1 2s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes animation_1 {
  from {
     transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

JS

  $('.animation-1').click(function () {
      $(this).toggleClass('is-open-animation-1').one(animation.keyframes, function (e) {
          $(this).remove();
      });
  });

我会通过添加 id 来做到这一点吗？ id='01' 并以某种方式使用它来确定接下来播放哪个动画？

如有任何意见，我们将不胜感激。

Answer 1

是的，可以通过为每个动画分配一个 ID 来轻松完成，例如animation-id，然后在单击 'next' 按钮时触发动画元素上的 .click() 事件。

工作fiddle：https://jsfiddle.net/maxflex/ym2f50pq/14/

下一个按钮触发 Css 动画

Next Button to trigger Css Animation's

jquery

css

animation

sequence

next