如何触发CSS动画一旦用户改变幻灯片?

Question

我正在使用动画幻灯片内容。我想在每次用户来回时都应用CSS转换。然而，我的第一张幻灯片有我想要的转换，但问题是它们同时加载。我需要某种js函数来调用转换，一旦幻灯片发生变化，而不是之前。

Answer 1

我只是通过在幻灯片中添加一个简单的。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;
}