0

我正在尝试从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。

提前致谢，

4

1 回答 1

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');
于 2013-11-10T07:23:01.427 回答