Question

我正在尝试从https://daneden.me/animate/向我的网站实施bounceinUp。

我没有点击按钮，而是试图将它放在div框中，这将在2-3秒后自动执行上述操作。

HTML

<div class="" id="animateTest">
<p style="opacity: 0.8;" data-test="bounceinUp">Testing</p>
</div>

CSS

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
    }

    80% {
        -webkit-transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes bounceInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -moz-transform: translateY(-30px);
    }

    80% {
        -moz-transform: translateY(10px);
    }

    100% {
        -moz-transform: translateY(0);
    }
}

@-o-keyframes bounceInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -o-transform: translateY(-30px);
    }

    80% {
        -o-transform: translateY(10px);
    }

    100% {
        -o-transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(-30px);
    }

    80% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    -moz-animation-name: bounceInUp;
    -o-animation-name: bounceInUp;
    animation-name: bounceInUp;
}
#animateTest {
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: .2s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-animation-delay: .2s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -ms-animation-duration: 1s;
    -ms-animation-delay: .2s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    -o-animation-duration: 1s;
    -o-animation-delay: .2s;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: both;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}

我认为这是javascript，虽然它没有显示在页面上（并且没有我搜索过的关于javascript的教程）。

<script>
    function testAnim(x) {
        $('#animateTest').removeClass().addClass(x);
        var wait = window.setTimeout( function(){
            $('#animateTest').removeClass()},
            1300
        );
    }

    </script>

无论如何，当我这样做时，它什么也没做。我想知道我做错了什么？如果这听起来很简单，我很抱歉，我刚开始学习HTML和javascript。

提前致谢，

Answer 1

这是您的代码的小提琴 - http://jsfiddle.net/yd79L/1/ 您的问题是您在创建函数后忘记调用该函数。还要记住，如果你想让一个函数进入'循环' - 它应该从

中调用它自己

同样在你的代码中你只有（x）作为函数的参数，你需要指定你想要使用的类的名称

    function testAnim(x) {
    $('#animateTest').removeClass().addClass(x);
    var wait = window.setTimeout( function(){
        $('#animateTest').removeClass(x);
        }, 1300
    );
window.setTimeout(function(){ // this code calls the function and makes it cycle
testAnim(x);
}, 2000 );
}

testAnim('bounceInUp');

Animate.css - 它是如何工作的？如何让它自动运行？

1 个答案: