Question

我对css3 / js有疑问。

我正在使用FlexSlider并尝试构建动画，如jsFiddle

所示

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

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

我很困惑我做错了什么。任何类型都可以指出并告诉我如何解决这个问题。

我的示例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

感谢您提出的问题

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

简而言之 - 您所要做的就是使用＆＃34;当前有效的幻灯片＆＃34;类并将动画应用于它 - 而不是每个 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 元素的开始转换（添加到Anan类，以获得更简单，更易读的CSS代码）。它们必须设置在起始位置，否则您将看到FOUT。

还有一件事：让动画迭代次数等于1。

希望这会有所帮助：）

如何确保在单击Flexslider动画上的前一个下一个按钮时重新启动？

1 个答案: