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

Question

我有关于 css3/js 的问题。

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

现在，我想要做的是有一个带幻灯片的动画.. * 文本 bounceInFromLeft，然后文本 bounceOutLeft（退出） * 出现下一张幻灯片以及 "bounceInLeft and then bounceOutLeft" 动画开始

我希望单击滑块 previous/next 按钮时发生同样的情况。但是，当我单击 prev/next 按钮时，动画不会重新开始。而是继续...

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

我的样本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

感谢您的提问

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

简而言之 - 您所要做的就是使用 "currently active slide" class 并将动画应用到它 - 而不是每个 p 或 h1 元素在那里。

看看 your reworked fiddle 并点击 next/prev 按钮。

.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 class，为了更简单和更具可读性 CSS 代码）。它们必须设置在起始位置，否则您会看到 FOUT。

还有一件事：让你的 animation-iteration-count 等于 1。

希望这对您有所帮助:)

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

How to ensure that when previous next buttons clicked on a Flexslider animation restarts?

css

jquery

css-animations

flexslider