Запускать анимацию css после загрузки страницы?

Question

[Чёкатилло]

Есть некая анимация css, которая запускается на странице один раз при загрузке некоторых объектов на странице

Анимацию нужно запускать после загрузки страницы

Если при загрузке работает скрипт лоадер страницы:

$(window).on('load', function () {
    var $preloader = $('#page-preloader');
    $preloader.delay(100).fadeOut('slow');
});

Как после него запустить анимацию? Анимация будет заключаться в плавном появлении элемент-ОВ из состояния, например display:none в display:block
в Общем после лоадера запускать класс-Ы этих блоков

Вопрос: как?

Спасибо!

Answer 1

[Егор Живагин]

$(document).ready( function(){
$('.class_name').addClass('класс_с_анимацией');
});

Или я чего недопонял?

Comments

[Чёкатилло]

Ну вот, если при загрузке работает скрипт лоадер страницы:
$(window).on('load', function () {
var $preloader = $('#page-preloader');
$preloader.delay(100).fadeOut('slow');
});

Как после него запустить анимацию? Анимация будет заключаться в плавном появлении элемент-ОВ из состояния, например display:none в display:block
в Общем после лоадера запускать класс-Ы этих блоков

[Егор Живагин]

Дмитрий: перед закрытием функции -
setTimeout( function(){
$('.class_name').addClass('класс_с_анимацией');
$('.class_name2').addClass('класс_с_анимацией2');
...
}, 110);

И дисплей не анимируется плавно. Разве что с show()/hide() играться. А обычно добавляют класс элементу, в котором прописаны стили для нового состояния. У элемента изначально задано transition , которое и отвечает за плавность. Но transition не работает со свойством display и некоторыми другими

[Чёкатилло]

Егор Живагин: Это как бы вот так, да? ))

$(window).on('load', function () {
var $preloader = $('#page-preloader');
$preloader.delay(100).fadeOut('slow');
setTimeout( function(){
$('.class_name').addClass('класс_с_анимацией');
$('.class_name2').addClass('класс_с_анимацией2');
}, 110);
});

[Егор Живагин]

Дмитрий: типо того)

[Чёкатилло]

Егор Живагин: немного не так для моего случая

Вот как в коде:

$(window).on('load', function () {
var $preloader = $('#page-preloader');
$preloader.delay(100).fadeOut('slow');
setTimeout( function(){
$('.logo').addClass('.containeranima');
}, 110);
});

Чет не работает (

[Егор Живагин]

Дмитрий: что именно не работает?
Пример на codepen был бы очень кстати

[Чёкатилло]

Егор Живагин: вроде так https://codepen.io/anon/pen/mWwRdq

[Чёкатилло]

Егор Живагин: может я не понял эти строки?

$('.class_name').addClass('класс_с_анимацией');
$('.class_name2').addClass('класс_с_анимацией2');

А еще, может без класса анимации обойтись можно, а анимация будет уже в .class_name?

[Егор Живагин]

Дмитрий: 1 - не подключили jQuery в настройках) 2 - в addClass не пишется точка
Вот так работает https://codepen.io/anon/pen/evRvgE

[Чёкатилло]

Егор Живагин: блин ппц Спасибо )

[Егор Живагин]

Дмитрий: бывает, не за что)

Answer 2

[iBird Rose]

как вариант делай анимацию по классу. а этот класс задавай элементу по window onload