jquery - 如何确保当上一个下一个按钮点击 Flexslider 动画时重新启动？

Question

我对 css3/js 有疑问。

我正在使用 FlexSlider 并尝试构建一个动画，从这个 jsFiddle 可以看出

https://jsfiddle.net/v7zvzkp1/

现在，我想做的是有一个带幻灯片的动画.. * 文本 bounceInFromLeft，然后文本 bounceOutLeft(退出) * 出现下一张幻灯片以及“bounceInLeft 然后 bounceOutLeft”动画开始

我希望点击 slider 上一个/下一个按钮时发生同样的情况。但是，当我单击上一个/下一个按钮时，动画不会重新启动。而是继续......

我对自己做错了什么感到困惑。任何人都可以指出并让我知道我可以解决这个问题。

我的示例 html 如下

<div class="flexslider left">
<ul class="slides">
    <li> 
        <img src="https://coronalabs.com/wp-content/uploads/2013/04/Dilbert_page_img2.png" >
        <div class="meta">
            <h1>Test header</h1>
            <div class="category">
                <p>READ MORE 1</p>
            </div>
            <div class="btn btn-slide btn-animation">MORE </div>
        </div>
    </li>
    <li> 
        <img src="https://www.walldevil.com/wallpapers/w04/thumb/116610-calvin-and-hobbes-calvin-amp-hobbes-comic-strip.jpg" >
        <div class="meta">
            <h1>Test header 2</h1>
            <div class="category">
                <p>READ MORE 1</p>
            </div>
            <div class="btn btn-slide btn-animation">MORE </div>
        </div>
    </li>
    <li>
        <img src="https://i.ytimg.com/vi/XHwMzZqRGZ8/maxresdefault.jpg">
        <div class="meta">
            <h1>Lorem ipsum dolor sit amet, consectetur.</h1>
            <div class="category">
                <p>READ MORE 2</p>
            </div>
            <div class="btn btn-slide btn-animation">MORE2 </div>
        </div>
    </li>
</ul>

对应的样式如下

    img {
    width: 300px;
    max-height: 200px;
}
.flex-direction-nav {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
}


.meta h1,
.meta p {
    animation: bounceInLeft 6500ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    opacity: 0;
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }
    30% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }
    40% {
        opacity: 1;
        -webkit-transform: translate3d(50px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    55% {
        opacity: 1;
        -webkit-transform: translate3d(50px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }
    65% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
} 

当然我是通过jQUery调用flexslider

$('.flexslider').flexslider({
    animation: "fade",
    controlNav: false
});

Answer 1

谢谢你的提问

我想到了一个相对简单的解决方案。

简而言之 - 您所要做的就是使用“当前事件的幻灯片”类并将动画应用到它 - 而不是那里的每个 p 或 h1 元素.

看看your reworked fiddle然后点击下一个/上一个按钮。

.slides .toAnimate{
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
}
.flex-active-slide .toAnimate {
  animation: bounceInLeft 6500ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  opacity: 0;
}

此外，请注意 p 和 h1 元素的开始转换(添加了 toAnimate 类，以获得更简单和更易读的 CSS 代码)。 它们必须设置在起始位置，否则您会看到 FOUT。

还有一件事:让您的animation-iteration-count 等于 1。

希望这有帮助:)