Анимация на странице - это всегда красиво и не всегда сложно. Наверняка вы используете анимацию типа transition при наведении на различные элементы или типа @keyframes для отображения элементов на странице. Давайте сейчас разберемся, какие способы назначения анимации существуют для компонентов во Vue.js.
Компонент Transition
Для анимации компонентов во Vue 3 существует специальный компонент-обертка, который называется <Transition>.
<Transition>является встроенным компонентом: это означает, что он доступен в любом шаблоне компонента без необходимости его регистрации. Его можно использовать для применения анимации появления и исчезновения элемента или компонента, переданным ему через слот по умолчанию. Для того, чтобы анимация сработала, нужно, чтобы выполнялось одно из следующих действий:
- Условный рендеринг через
v-if - Условное отображение через
v-show - Переключение динамических компонентов с помощью
<component>специального элемента - Изменение специального аттрибута
key
Чтобы назначить анимацию, существует 4 предопределенные в официальной документации класса, внутри которых нужно использовать свойство transition (.v-enter-active, .v-leave-active ) и другие свойства, которые должны быть анимированы (.v-enter-from, .v-leave-to).
Например, этот код позволит запускать анимацию исчезновения/появления в зависимости от значения константы show, которая меняется с true на false и наоборот при нажатии на кнопку.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script setup> import { ref } from 'vue'; const show = ref(true); </script> <template> <button @click="show = !show">Toggle</button> <Transition> <p v-if="show">Some text to transition</p> </Transition> </template> <style scoped> .v-enter-active, .v-leave-active { transition: opacity 0.5s ease; } .v-enter-from, .v-leave-to { opacity: 0; } </style> |
Пример с появлением и исчезновением меню:
See the Pen Vue.js 3 Transition by Elen (@ambassador) on CodePen.
Когда элемент в <Transition>компоненте вставляется или удаляется, происходит следующее:
- Vue автоматически определит, применены ли к целевому элементу CSS-переходы или анимация. Если это произойдет, в соответствующее время будет добавлено/удалено несколько классов перехода CSS .
- Если есть слушатели перехватчиков JavaScript , эти перехватчики будут вызываться в соответствующие моменты времени.
- Если переходы/анимации CSS не обнаружены и не предоставлены перехватчики JavaScript, операции DOM для вставки и/или удаления будут выполняться в следующем кадре анимации браузера.
CSS классы в компоненте Transition
Для переходов входа/выхода (появления/исчезновения) во Vue 3 применяется шесть классов. Поскольку анимации связаны с добавлением (входом) элемента в DOM-структуру страницы (Enter) и исчезновением (выходом - Leave) элемента, то и названия классов привязаны к этим 2-м состояниям.
Как они действуют, можно посмотреть на картинке.
v-enter-from: Начальное состояние входа (появления элемента). Добавляется до вставки элемента, удаляется через один кадр после вставки элемента.v-enter-active: Активное состояние для входа. Применяется на протяжении всей фазы входа. Добавляется перед вставкой элемента и удаляется после завершенияtransition/animation. Этот класс можно использовать для определения продолжительности (duration), задержки (delay) и кривой замедления (easing) дляtransitionв анимации появления (входа).v-enter-to: Конечное состояние входа. Добавляется через один кадр после того, как элемент вставлен (в то же время удаляется классv-enter-from), удаляется по завершенииtransition/animation.v-leave-from: Начальное состояние исчезновения. Добавляется сразу при срабатывании transition исчезновения, удаляется через один кадр.v-leave-active: Активное состояние исчезновения элемента. Применяется в течение всей фазы выхода. Добавляется сразу при срабатывании анимации исчезновения и удаляется после завершенияtransition/animation. Этот класс можно использовать для определения продолжительности (duration), задержки (delay) и кривой замедления (easing) дляtransitionв анимации исчезновения (выхода) элемента.v-leave-to: Конечное состояние отпуска. Добавляется через один кадр после срабатыванияtransitionисчезновения (выхода) (одновременно удаляется классv-leave-from), удаляется при завершенииtransition/animation.
Кроме этих классов, мы можем использовать похожие по названию, но с именем transition-анимации, указанной для компонента <Transition>.
Именованный Transition
Мы можем использовать разные классы для компонента Transition, если зададим ему атрибут name. Это удобно тем, что мы можем в одном и том же компоненте использовать разные виды (классы) анимации.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <script setup> import { ref } from 'vue' const show = ref(true) </script> <template> <Transition name="fade"> <div v-if="show" class="alert">Fade In Text</div> </Transition> <Transition name="pop"> <div v-if="show" class="alert alert-danger">Pop In Text</div> </Transition> <p><button @click="show = !show">Toggle</button></p> </template> <style> .alert { font-size: 2rem; font-weight: bold; padding: 15px; border-radius: 10px; background-color: #f3d374; max-width: 700px; margin: 10px; } .alert-danger { background-color: #e77f7f; } .fade-enter-active, .fade-leave-active { transform-origin: unset; transition: opacity .5s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; } .pop-enter-active, .pop-leave-active { transform-origin: center; transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 2.275); } .pop-enter-from, .pop-leave-to { opacity: 0; transform: scale(1.3); } </style> |
В этом примере, по сути мы используем те же классы, что и ранее, но вместо .v- задаем имя нашей анимации.
Пример "вживую":
See the Pen Vue.js 3 Transition + Animate.css by Elen (@ambassador) on CodePen.
Анимация появления
Если вы хотите применить transition при начальном рендеринге узла, вы можете добавить атрибут appear к компоненту Transition:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <Transition appear> <div class="hero"> <h1>Vue.js 3 Transition appear</h1> <p>Lorem ipsum dolor sit amet consectetur ad...</p> <p>Odit quo fugiat nulla quod mollitia sequi ...</p> </div> </Transition> <style> .hero { color: #fff; width: 100%; height: 400px; padding: 30px 20%; margin: 20px auto; background: url(https://source.unsplash.com/L95xDkSSuWw/1600x500) center/cover #000; border: 3px double #1E8CBE; text-align: justify; } p { margin-bottom: 1.5em; } .v-enter-active, .v-leave-active { transition: opacity 1s ease-out; } .v-enter-from, .v-leave-to { opacity: 0; } </style> |
Тогда ваш компонент появится с той анимацией, которую вы прописали в классах.
See the Pen Vue.js 3 Transition appear by Elen (@ambassador) on CodePen.
Отдельный компонент для анимированного контента
В том случае, когда нам нужно использовать анимацию какого-либо типа несколько раз мы можем в одном компоненте описать все нужные нам классы и сделать его за счет использования <slot></slot> "оберткой" для любого другого кода, который должен эту анимацию использовать. Т.е. мы как бы повторяем функционал компонента Transition, но упрощенно, только для определенного вида анимации.
Код в компоненте, который мы разместим в файле PopTransition.vue, будет таким:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <template> <Transition name="pop"> <slot></slot> </Transition> </template> <style> .pop-enter-active, .pop-leave-active { transform-origin: center; transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 2.275); } .pop-enter-from, .pop-leave-to { opacity: 0; transform: scale(1.3); } </style> |
Тогда в файле App.vue или любом другом после импорта нашего PopTransition.vue мы можем обернуть в наш анимационный компонент другой элемент:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script setup> import { ref } from 'vue' import PopTransition from './components/PopTransition.vue'; const show = ref(true); </script> <template> <button @click="show = !show"> {{ show ? "Hide" : "Show" }} </button> <PopTransition> <h1 v-if="show">Some text</h1> </PopTransition> </template> |
Таким образом мы можем переиспользовать наш код столько раз, сколько потребуется.
Далее мы еще не раз воспользуемся таким подходом для создания других анимаций.
Анимация, основанная на классах Tailwind
TailwindCss стала уже очень популярным CSS-фреймворком, т.к. позволяет использовать комбинацию классов для разных нужд. Она особенно хороша для Vue.js или React.js, т.к. подтягивает только те классы, которые необходимы в данном проекте.
Для установки TailwindCss в терминале нужно набрать следующие команды:
| 1 2 | npm install -D tailwindcss npx tailwindcss init |
После этого у вас будет создан файл tailwind.config.js. В нем нужно добавить конфигурацию:
| 1 2 3 4 5 6 7 8 9 10 11 | /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.vue", "index.html" ], theme: { extend: {}, }, plugins: [], } |
Затем в файле main.css вверху нужно добавить все или избранные директивы (часто достаточно только @tailwind utilities;):
| 1 2 3 | @tailwind base; @tailwind components; @tailwind utilities; |
Все, теперь вы можете использовать классы этой библиотеки.
Вы можете найти классы, предназначенные для transition-анимации в документации TailwindCSS. Именно их нужно использовать в сочетании с компонентом <Transition> из Vue, указав их в специальных атрибутах:
| 1 2 3 4 5 6 7 8 9 10 | <template> <Transition enter-active-class="transition-opacity duration-500" leave-active-class="transition-opacity duration-500" enter-from-class="opacity-0" leave-from-class="opacity-0" > <slot></slot> </Transition> </template> |
Указав <slot></slot> вместо конкретной обертки, мы получаем возможность использовать этот компонент в качестве обертки уже в другом компоненте, предварительно импортировав его:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <script setup> import { ref } from 'vue' import TailwindFadeAnimation from './components/TailwindFadeAnimation.vue'; const showAlert = ref(true); </script> <template> <button @click="showAlert = !showAlert"> {{ showAlert ? "Hide" : "Show" }} Alert </button> <TailwindFadeAnimation> <h1 v-if="showAlert" class="alert">Tailwind Fade Animation</h1> </TailwindFadeAnimation> </template> |
Пример использования классов Tailwindcss :
See the Pen Vue.js 3 Transition with Tailwindcss classes by Elen (@ambassador) on CodePen.
Анимация на основе свойства @keframes
В этом случае нам опять понадобится именованный компонент <Transition> и классы, в которых свойство transition меняется на animation. Ну, и конечно, описание кадров самой анимации в свойстве @keyframes.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <script setup> import { ref } from 'vue' const show = ref(true); </script> <template> <button @click="show = !show">Переключаем</button></p> <Transition name="bounce"> <h2 v-if="show" style="text-align: center;"> Это анимация bounce. Нравится? </h2> </Transition> <style> .bounce-enter-active { animation: bounce-in 0.5s; } .bounce-leave-active { animation: bounce-in 0.5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } } </style> |
.bounce-leave-active свойство animation вызывается с параметром reverse, т.е. анимация воспроизводится наоборот.При использовании animate.css для тех же целей мы можем указать разные классы.
Пример из кода выше можно покликать вживую:
See the Pen Vue.js 3 Transition with @keyframes by Elen (@ambassador) on CodePen.
Компонент-обертка с анимацией @keframes
Для использования анимации типа @keframes в этом случае нам нужно будет создать отдельный .vue файл (назовем его BounceInDownTransition.vue) и разместить там компонент Transition с атрибутом name, который будет соответствовать имени класса, использующего такую анимацию, аналогично тому, как мы это делали в коде выше. Само свойство @keframes мы размещаем тоже в блоке style.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <template> <Transition name="bounceindown"> <slot></slot> </Transition> </template> <style> @keyframes bounceInDown { 0%,60%,75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier (.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(.9); transform: translate3d(0, 25px, 0) scaleY(.9) } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(.95); transform: translate3d(0, -10px, 0) scaleY(.95) } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(.985); transform: translate3d(0, 5px, 0) scaleY(.985) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceindown-enter-active { animation: bounceInDown 1s; } .bounceindown-leave-active { animation: bounceInDown 1s reverse; } </style> |
В файле App.vue или в другом компоненте, где уже нужно использовать анимацию, размещаем примерно такой код:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <script setup> import BounceInDownTransition from './components/BounceInDownTransition.vue'; const show = ref(false) </script> <template> <button @click="show = !show"> Toggle </button> <BounceInDownTransition> <h1 v-if="show">Animation @keframes</h1> </BounceInDownTransition> </template> |
В результате при клике на кнопке мы увидим анимированное появление и исчезновение заголовка.
Анимация с помощью Animate.css
Библиотека Animate.css является сборником классов, которые как раз основаны на использовании свойства @keframes. Почитать о ней подробнее вы можете в отдельной статье. Она очень хороша для использования в вашем Vue-проекте.
Для использования этой библиотеки сначала ее надо загрузить в проект:
| 1 2 3 | npm install animate.css --save //или yarn add animate.css |
Затем ее нужно подключить (импортировать) в тот файл, в котором вы собираетесь ее использовать:
| 1 | import 'animate.css'; |
Для создания анимации вы можете выбрать и скопировать любой класс из всех в Animate.css, но, если вы хотите использовать класс с In в названии, то для обратной анимации вам понадобится аналогичный класс с Out в его имени. Добавлять нужно не только названия классов, но и класс animate__animated, т.к. в нем указывается продолжительность анимации. Используйте для этих манипуляций атрибуты enter-active-class и leave-active-class:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script setup> import {ref} from 'vue'; import 'animate.css'; const showHero = ref(false); </script> <template> <div> <button @click="showHero = !showHero">Toggle</button> <Transition enter-active-class="animate__animated animate__zoomInDown" leave-active-class="animate__animated animate__zoomOutDown" > <h1 class="hero" v-if="showHero">Use Animate.css classes</h1> </Transition> </div> </template> <style scoped> .hero { text-align: center; font-size: 3em; } </style> |
В файле App.vue нужно добавить код:
| 1 2 3 4 5 6 7 | <script setup> import UseAnimateCSS from './components/UseAnimateCSS.vue'; </script> <template> <UseAnimateCSS /> </template> |
Пример в действии:
See the Pen Vue.js 3 Transition + Animate.css by Elen (@ambassador) on CodePen.
Анимация с помощью GSAP
Для начала нужно установить пакеты, которые позволят вам работать с GSAP
| 1 2 3 | npm install gsap //или yarn add gsap |
Затем в файле компонента нужно выполнить импорт gsap:
| 1 | import { gsap } from 'gsap' |
Функцию done, которая есть во Vue-хуке onEnter, нам нужно вызывать для того, чтобы удалить элемент из структуры DOM после окончания анимации.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <script setup> import { gsap } from 'gsap' function onBeforeEnter(elem){ gsap.set(elem, { scale: .25, opacity: 0 }) } function onEnter(elem, done){ gsap.to(elem, { duration: 2, scale: 1, opacity: 1, ease: 'elastic.inOut(2.5, 1)', onComplete: done, }) } function onLeave(elem, done){ gsap.to(elem,{ duration: 2, scale: 1, opacity: .2, ease: 'elastic.inOut(2.5, 1)', onComplete: done, }) } </script> <template> <Transition @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" :css="false" > <slot></slot> </Transition> </template> |
Обратите внимание, что поскольку мы не используем css-классы для transition, то атрибут :css="false". Остальные атрибуты - это хуки Vue, которые предполагают наличие соответствующих функций. Функции будут вызваны одна за другой.
Используем теперь этот компонент, как обертку для элемента в другом компоненте.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script setup> import { ref } from 'vue' import GSAPTransition from './components/GSAPTransition.vue'; const showBall = ref(true); </script> <template> <button @click="showBall = !showBall"> {{ showBall ? "Hide" : "Show" }} Ball </button> <GSAPTransition> <div class="ball" v-if="showBall"></div> </GSAPTransition> </template> |
Несколько упрощенный пример этого кода вы найдете ниже:
See the Pen Vue.js 3 Transition with GSAP by Elen (@ambassador) on CodePen.
Вот, что еще можно сделать на основе плагина ScrollTrigger от GSAP:
See the Pen Play with Header on Page Transitions by GSAP (@GreenSock) on CodePen.
Анимация с помощью плагина AutoAnimate
Всю нужную документацию вы найдете на официальном сайте AutoAnimate.
Для начала нужно установить пакет с npm или yarn:
| 1 2 3 | npm install @formkit/auto-animate //или yarn add @formkit/auto-animate |
Далее в файле main.js вашего проекта нужно импортировать этот плагин наряду с другими импортами:
| 1 2 3 4 5 | import { createApp } from 'vue' import { autoAnimatePlugin } from '@formkit/auto-animate/vue' import App from 'App.vue' createApp(App).use(autoAnimatePlugin).mount('#app') |
После этого можно использовать атрибут v-auto-animate для контейнера с элементами, которые должны быть анимированы.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <script setup> import { ref } from 'vue'; function shuffleArray(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } const randomColor = () =>{ const randColor = Math.floor(Math.random()*16777215).toString(16); return '#'+randColor; } const colors = ref(Array.from({length: 20}, ()=> randomColor())) </script> <template> <button class="w-full text-lg" @click="shuffleArray(colors)">Shuffle</button> <div class="flex-wrapper" v-auto-animate> <div class="box" v-for="(color, i) in colors" :key="color" @click="colors.splice(i, 1)" :style="{ backgroundColor: color }"></div> </div> </template> <style> .flex-wrapper { max-width: 600px; margin: 20px auto; display: flex; flex-wrap: wrap; gap: 5px; } .box { width: 100px; height: 100px; border: 1px solid #333; cursor: pointer; } </style> |
В этом коде анимация происходит при "перетасовке" массива кликом на кнопке "Shuffle" или при клике на любом цветном боксе, когда он удаляется и происходит перестройка внешнего вида блока с class="flex-wrapper".
Видео по теме на английском:
Анимация при скролле с помощью @vueuse/motion
Анимация появления блока/секции при скролле является очень популярной. И для этого у Vue есть возможность использовать дополнительный плагин. Описание плагина вы найдете в официальной документации.
Как и с предыдущим плагином, сначала нужно добавить пакет:
| 1 2 3 | npm install @vueuse/motion //или yarn add @vueuse/motion |
Затем вы можете добавить vueuse/motion глобально для всех файлов проекта, добавив код в main.js:
| 1 2 3 4 5 6 7 | import { MotionPlugin } from '@vueuse/motion' const app = createApp(App) app.use(MotionPlugin) app.mount('#app') |
Если вы хотите импортировать код директивы только из компонентов, которые его используют, импортируйте директиву и установите ее на уровне компонента.
| 1 2 3 4 5 6 7 | import { directive as motion } from '@vueuse/motion' export default { directives: { motion: motion(), }, } |
Варианты доступных анимаций можно найти по ссылке Presets. Отсюда можно выбрать, каким образом должен быть анимирован ваш блок.
Добавить анимацию нужно в каждый из блоков. Если вы хотите, чтобы анимация выполнялась каждый раз при скролле, необходимо выбирать варианты вроде v-motion-slide-visible-right или v-motion-pop-visible. Если вам нужно, чтобы анимация проигралась один раз, то можно использовать что-либо с приставкой -once, например, v-motion-pop-visible-once.
В коде ниже мы создаем ряд цветных секций на основе предыдущего кода с появлением каждой из них при скролле с анимацией.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <script setup> import { ref } from 'vue'; function shuffleArray(arr) { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; } const randomColor = () => '#' + Math.floor(Math.random()*16777215).toString(16); const colors = ref(Array.from({length: 10}, ()=> randomColor())) </script> <template> <button class="w-full text-lg" @click="shuffleArray(colors)">Shuffle</button> <div class="flex-wrapper"> <div class="section" v-for="(color, i) in colors" :key="color" v-motion-slide-visible-left :style="{ backgroundColor: color }">Section {{i}}</div> </div> </template> <style scoped> .flex-wrapper { max-width: 600px; margin: 20px auto; display: flex; flex-wrap: wrap; gap: 5px; } .section { width: 100%; height: 150px; border: 1px solid #333; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 2em; } </style> |
Анимация в стиле Material Design
Material Design - это разработка Google, и в этом дизайне есть свой подход к анимациям. Например, очень популярна "волновая" анимация, при которой от места клика расходится "волна" какого-ибо цвета.
Для такого вида анимации в проектах на Vue мы можем использовать плагин v-wave. На самой страничке плагина вы уже можете увидеть, какие анимации будут вам доступны.
Для установки плагина наберите в терминале:
| 1 | npm i v-wave |
В main.js добавьте код:
| 1 2 3 4 5 6 7 | import { createApp } from 'vue' import VWave from 'v-wave' import App from './App.vue' const app = createApp(App) app.use(VWave) |
Можно глобально установить в том же main.js настройки:
| 1 2 3 4 5 6 7 8 9 10 11 | import { createApp } from 'vue' import VWave from 'v-wave' import App from './App.vue' const app = createApp(App) app.use(VWave, { color: 'red', initialOpacity: 0.5, easing: 'ease-in', }) |
Можно настроить ваш компонент, задав данный для эффекта волны для какого-либо элемента. Как правило, это кнопки.
Для использования настроек по умолчанию достаточно добавить к элементу с анимацией атрибут v-wave:
| 1 2 3 | <template> <button class="btn" v-wave>Default Button</button> </template> |
Класс вы можете задать свой в соответствии с теми стилями, которые вам нужны.
Изменяем настройки частично:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <template> <button class="btn" v-wave="{ color: 'orange', initialOpacity: 1, easing: 'ease-in', }"> Click here </button> </template> <style scoped> button.btn { padding: 30px 60px; background-color: #f9f9f9; border: 2px solid #ccc; font-size: 18px; margin: 20px; } </style> |
Все возможные настройки вы можете взять из таблицы в описании плагина. Однако даже пример на сайте плагина дает возможность "поиграться" с настройками, чтобы ввести свои данные и посмотреть на эффект.
| 1 2 3 4 5 6 7 8 9 10 11 12 | <button class="btn" v-wave="{ color: '#088ac1', easing: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)', duration: 1, dissolveDuration: 0.6, initialOpacity: 0.8, finalOpacity: 0.1, cancellationPeriod: 75, trigger: 'auto', }"> Blue effect </button> |
Для изменения триггера, т.е. элемента, реагирующего на клик, можно использовать такой код:
| 1 2 3 4 5 6 | <div class="alert" v-wave="{ color: 'red', trigger: 'button2' }"> <h2>Click on button below</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, sapiente.</p> </div> <button class="btn" v-wave-trigger:button2> Alert Trigger</button> |
Здесь мы указываем, что кликать нужно на элемент button, а волна будет у div-a.
Пример вживую:
See the Pen Vue.js 3 Transition with V-Wave by Elen (@ambassador) on CodePen.
В целом, если вам нужно реализовать эффект волны для Material Design, то стоит поиграть с настройками и определиться, что именно вам подходит.
