тэгу, но не прет =(
Может кто подсказать?
Мне хотелось бы, чтобы div при загрузке страницы начинал исчезать и удалялся из DOMа через 3 сек.
С помощью jQuery это реализуется просто:
$(".loader").fadeOut(3550, function () {
$(this).remove();
});
В svelte какая-то байда с функцией fade. В аналогичной форме с джеквери оно не пашет:
<script>
import { fade } from "svelte/transition";
import { expoOut } from "svelte/easing";
</script>
<!-- IT DOES NOT WORK -->
<div class="loader" out:fade={{ delay: 0, duration: 3550, easing: expoOut }}>
<h1 class="loader-hello">Hello</h1>
<h1 class="loader-world">World</h1>
</div>
В API нашел, что переход (то бишь transition) инициируется добавлением или удалением элемента из DOM в результате изменения состояния приложения. Я правильно понял, что без блока {#if visible} {/if} ничего не будет работать? Надо использовать какой-нибудь setTime() или setInterval()... и на кой мне тогда свойство delay? =\
Все верно поняли. Delay — это задержка применения анимации, прямо как в CSS. Да, нужен if-тег и интервал. Интервал рекомендую делать в onMount и возвращать стрелочную функцию, которая делает clearInterval. А вам точно нужно для этого JS юзать? Может, сойдет CSS-анимация, меняющая opacity элемента, но не убирающая его из дома?
Спасибо за ответ.
Есть у компилятора опция init чтобы анимации сразу у нод проигрывались, а не после удаления из dom, но она работает только для всего приложения(на данный момент времени)
Обсуждают сегодня