Хобрук: Ваш путь к мастерству в программировании

Как добавить задержку анимации с помощью Animate.css и ViewportChecker?

Я пытаюсь добавить «задержку» к различным анимированным элементам класса на определенной веб-странице, используя animate.css версии 3.5.1 Даниэля Идена и версию 1.8.7 jquery-viewport-checker Дирка Гроенена.

Я пытался использовать функцию setTimeout, например...

setTimeout(function () {
jQuery('.fadeinleft1').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeInLeft',
    offset: 100
   });
}, 500
);

Но это, очевидно, влияет и на скрытый класс. Мне нужно, чтобы анимация задерживалась, когда она достигает области просмотра, и я могу соответственно задерживать каждый объект. Искал когда-то и просто не могу найти ответ.

animation jquery css viewport
26.08.2016

Ответы:


1

Поймите, как только я задаю вопрос, я нахожу исправление, которое включает только добавление css. Не нужно трогать javascript. Очень быстрый и простой способ добиться отложенной анимации при использовании animate.css и viewport-checker. Вы делаете это, добавляя класс css, который использует «задержку анимации».

Javascript:

jQuery('.fadeinleft').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeInLeft',
    offset: 100
   });

Создайте следующую анимированную задержку css, как хотите и сколько хотите, и вы можете использовать их глобально для всех анимаций:

.delay-1 {
animation-delay: .25s;
}
.delay-2 {
animation-delay: .5s;
}
.delay-3 {
animation-delay: .75s;
}
.delay-4 {
animation-delay: 1s;
}

Затем все, что вам нужно сделать, это добавить классы к анимированным элементам как таковые:

<div class="col-md-4 fadeinleft">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 1</p>
                <img src="/images/image1.jpg">
        </div>
    </a>
</div>

<div class="col-md-4 fadeinleft delay-1">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 2</p>
                <img src="/images/image2.jpg">
        </div>
    </a>
</div>

<div class="col-md-4 fadeinleft delay-2">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 3</p>
                <img src="/images/image3.jpg">
        </div>
    </a>
</div>

Вот оно!

26.08.2016

2

Я не совсем понимаю, почему вы используете viewportChecker() или вообще какой-либо javascript/jQuery. Опубликованное вами решение использует jQuery для добавления класса hidden css к вашему элементу ( hidden был заменен на d-none в Bootstrap 4), но в этом нет необходимости, поскольку класс animated автоматически сделает это за вас. Цель Animate.css — обеспечить эффективную бесшовную анимацию без лишнего кода javascript/jQuery.

Поскольку Animate.css использует свойство animation(-name) css для анимации элементов, оно учитывает свойство animation-delay css. Ваше решение должно работать, даже если вы полностью удалите код jQuery (как описано выше).

19.11.2018
Новые материалы
Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
Обзор: Машинное обучение: классификация
Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
Разработка расширений Qlik Sense с qExt
Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..