如何在用户更改幻灯片后触发 CSS 动画？

Question

我正在为我的幻灯片内容使用Animate 。 我想在用户每次来回走动时应用 css 转换。 然而我的第一张幻灯片有我想要的转换，但问题是它们同时加载。 我需要某种 js 函数来在幻灯片切换之前调用转换。

Answer 1

我只是通过向幻灯片添加一个 simple.active 类然后仅在它处于活动状态时才显示 CSS 过渡来解决这个问题。 现在，一旦移动幻灯片，我的图像和 H1 都会动画化。

/* ---------- CSS TRANSACTIONS ------------ */

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}






@keyframes slide-in-bottom {
  0% {
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}





.slide-active h1{
  animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;
  opacity: 1;
  -webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;
}

.slide-active img{
  animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
  -webkit-animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
}