Search the Community
Showing results for tags 'attr'.
Found 1 result
-
Всем привет =) Создал тему на киберфоруме. Там уже 2-й день молчат. Решил перебраться сюда. Итак, разрабатываю сайт. Был у меня на этом сайте прелоадер. Обыный, простенький. Просто вешался на весь экран. Когда контент загружался он скрывался с анимацией спада (fade in/out). Собственно код: $('#preloader').delay(350).fadeOut('slow'); Но тут мне рассказали про data атрибуты. Решил попробовать их. Пишу следующее: <body id="main" data-preloader > body#main::before { content: attr(data-preloader); display: block; position: fixed; z-index: 100; top: ; left: ; width: 100vw; height: 100vh; background-color: beige; -webkit-transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out; } $(document.body).removeAttr('data-preloader'); Прелоадер не скрывается. Просто висит на весь фон. Но я в принципе попробовал сделать и как в статье на htmlbook, (поставить вместо before - after) но результат тот же. Методом тыка я догадался что дело в css. Переписал так: [data-preloader] {...} Вроде заработало. Но нет этого спада. Прелоадер просто, грубо, без анимации исчезает. Я вообще рассчитывал, что он примет во внимание св-во transition, но увы. Как сделать такую анимацию ? Ещё попробовал написать следующее: document.getElementById('main').dataset.preloader.style.display = 'none'; Тогда прелоадер снова не исчезает. Не пойму просто логику. Ошибок в дебагере нету, но он не исчезает. Короче, как сделать такую анимацию через data атрибут?
