Ответ
Да, работал с анимациями в Vue, используя <transition> и <transition-group>. Они позволяют добавлять анимации при появлении, удалении и изменении порядка элементов.
Пример простой анимации fade:
<template>
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">Hello, Vue!</p>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>Также использовал библиотеки, например GSAP для сложных анимаций.
Ответ 18+ 🔞
А, ну это ж классика, блядь! Vue и его эти... <transition> с <transition-group>. Ну, вроде как нормальные ребята, не подведут, если надо элемент плавненько вывалить на сцену или, наоборот, спиздить его с неё, да ещё и порядок поменять, если что.
Вот смотри, самый простой пример, чтоб мозги не ебать. Хочу, чтобы текст плавно появлялся и исчезал, как призрак, блядь.
<template>
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">Hello, Vue!</p>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>Весь фокус, ёпта, в этих классах. Пока элемент вставляется, Vue накидывает fade-enter и fade-enter-active. А когда удаляется — fade-leave-active и fade-leave-to. Ты просто говоришь CSS: «Слушай, братан, на протяжении полсекунды (0.5s) плавненько меняй opacity, а в начале и в конце пусть будет ноль». И всё, пиздец, магия! Текст не дёргается, как сука в припадке, а культурно растворяется.
Ну а если тебе этих стандартных выебонов мало — можно, конечно, и GSAP прикрутить. Эта библиотека — просто овердохуища возможностей, там уже такие пируэты выписывать можно, что сам от себя офигеешь. Но для начала и этого хватит, чтоб не облажаться.