Animate.css - Как это работает? Как заставить это работать автоматически?

Question

Animate.css - Как это работает? Как заставить это работать автоматически?

0

Я пытаюсь реализовать bounceinUp с https://daneden.me/animate/ на моем веб-сайте.

Вместо того, чтобы нажимать на кнопку, я пытаюсь поместить ее в поле 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.

Заранее спасибо,

user2320517 10 нояб. 2013, в 07:26

Источник

0

Прежде всего, у вас есть дополнительная скобка} в вашем CSS для .bounceInUp Вам нужно удалить ее, чтобы CSS работал
Maxim Ershov 10 нояб. 2013, в 06:39
0

сделал это уже, должно быть, #animateTest между css! Я буду редактировать это в!
user2320517 10 нояб. 2013, в 06:45

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Прежде всего, у вас есть дополнительная скобка} в вашем CSS для .bounceInUp Вам нужно удалить ее, чтобы CSS работал
сделал это уже, должно быть, #animateTest между css! Я буду редактировать это в!

Maxim Ershov · Accepted Answer · 2013-11-10T06-11-00.000Z

вот сценарий вашего кода - 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');

большое спасибо! Оно работало завораживающе! но мне было интересно, что я должен изменить, чтобы анимация появлялась позже, чем сейчас (не скорость анимации, я имею в виду время появления этой анимации?) СПАСИБО СНОВА!
хорошо, в коде выше, время для анимации является второй функцией setTimeout (). Так что попробуйте увеличить число в этой функции. Помните, что 2000 равен 2 секундам, исходя из этого, вы можете увеличить его до нужного вам числа.