предисловие
Сегодня еще один день обучения, и я завершил свои знания об анимационных эффектах Vue, которые я изучил. Когда я однажды забуду, я открою свои самородки и отправлю несколько слов с несколькими глазами 🦈 Резюме выглядит следующим образом
текст
Принцип анимации CSS в Vue
Если вам нужны анимационные эффекты, вам нужно поместить элемент вtransitionВ теге (можно дать тегу перехода имя и добавить имя для затухания), так будет эффект анимации перехода.принцип:principle: когда элементtransitionПосле обертывания Vue автоматически проанализирует стиль CSS элемента, а затем построит процесс анимации.Vue добавит два имени класса к внутреннему элементу метки в тот момент, когда анимация вот-вот будет выполнена, а именно: fade-enter и fade- введите -active, после завершения выполнения первого кадра анимации, когда vue анализирует переход и знает, что это эффект анимации, vue сделает два события, когда анимация дойдет до второго кадра,1.Удалить имя класса fade-enter2.plus имя класса постепенного ввода-входа. Затем анимация продолжает выполняться до момента ее окончания, vue удалит fade-enter-active и fade-enter-to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue中的CSS动画原理</title>
<script src="../vue.js"></script>
<style>
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 3s;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show:true
},
methods: {
handleClick:function() {
this.show = !this.show
}
},
})
</script>
</body>
</html>
Использование библиотеки Animate.css с Vue
Когда вы делаете анимационные эффекты, вы можете использовать анимацию в css3, чтобы сделать их, Что, если вы не хотите печатать сами (лень, просто нажмите, если не согласны 🐷)? В это время можно использоватьAnimate.css(Предоставляются все анимационные эффекты CSS3@keyframes) Нажмите на нее, у вас будет множество анимационных эффектов на выбор, так как же их использовать?
- Перейдите на официальный сайт, чтобы загрузить библиотеку Animate.css.
- Измените как enter-active-class, так и leave-active-class на имя класса, например анимированное при переходе. Это значит сказать vue, что я хочу использовать эффект анимации в анимационной библиотеке.
<transition
name="fade"
enter-active-class="animated"
leave-active-class="animated"
>
- Третий шаг — перейти в библиотеку анимации, выбрать имя нужного эффекта анимации, а затем добавить его после анимации.
enter-active-class="animated swing"
leave-active-class="animated shake"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在Vue中使用Animate.css库</title>
<script src="../vue.js"></script>
<link rel="stylesheet" href="./animate.css">
<style>
</style>
</head>
<body>
<div id="app">
<transition
name="fade"
enter-active-class="animated swing"
leave-active-class="animated shake"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show:true
},
methods: {
handleClick:function() {
this.show = !this.show
}
},
})
</script>
</body>
</html>
Но когда приведенный выше код запустится, вы обнаружите, что элемент не имеет эффекта анимации при первом отображении страницы.Как сделать так, чтобы элемент также имел эффект анимации при первой загрузке на странице👀
z Просто добавьте следующие две строки кода к переходу
<transition
name="fade"
appear
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing"
>
Один из них появляется, который сообщает Vue, что я хочу анимировать его при первой загрузке, и плакать, если я его не даю.
Тогда это Appear-active-class = "анимированные качели" это предложение, то есть я впервые использую эффект анимации скорпиона, а потом расскажу.Использование переходов и анимаций вместе в Vue
Что мне делать, если вы хотите использовать анимацию @KeyFrames, предоставленные анимательной библиотекой одновременно?
это просто
enter-active-class="animated swing"
leave-active-class="animated shake"
изменить на
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
就可以像之前一样自己定义transition动画了。 но нужноУведомлениеСтук по клавише 👩🏫Анимация @keyframes в библиотеке Animate имеет свое время (вы можете увидеть это, просмотрев файл css), и ваш пользовательский переход также определяет свое время. Сколько времени длится анимация в это время? На самом деле, Vue не ясен. В настоящее время нам нужно установить его вручную. добавить тег перехода
<transition
type="transition"
Это означает, что анимация имеет как анимацию @keyframes библиотеки Animate, так и анимацию в виде перехода, но продолжительность анимации мы определяем исходя из продолжительности анимации перехода. Конечно, вы также можете настроить продолжительность анимации, если вы настраиваете ее, вам нужно написать это так
<transition
:duration="10000"
Единицей является миллисекунды, и тип предыдущего шага задавать не нужно. Вы можете открыть консоль самостоятельно, чтобы проверить элемент, чтобы увидеть продолжительность анимации, когда анимация выполняется, или вы можете настроить ее немного сложнее.
:duration="{enter: 5000,leave:10000}"
Установить продолжительность анимации входа и исчезновения анимации
Анимация в Vue в сочетании с Velocity.js
除了transition和@keyframes，Vue给我们提供了很多JS动画钩子。 Соответственно
| начинается анимация | @before-enter | @before-leave | Этот процесс имеет параметр el, который идентифицирует элемент метки, обернутый переходом. |
|---|---|---|---|
| процесс анимации | @enter | @leave | Этот процесс имеет два параметра: el и метод done, который используется, чтобы сообщить Vue, что выполнение анимации завершено. |
| анимация заканчивается | @after-enter | @after-leave | Эта процедура также имеет параметр el k |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue中的动画与Velocity.js的结合</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- Vue给我们提供了很多JS动画钩子 -->
<!-- 1.给transition绑定一个事件 绑定一个事件给动画钩子 enter在befor-enter这个动画钩子结束后运行 -->
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show:true
},
methods: {
handleClick: function() {
this.show = !this.show
},
// handleBeforeEnter能够接收一个参数el,el指的是动画包裹的元素标签，在这里是div
handleBeforeEnter: function(el) {
// console.log(el)
el.style.color = 'red'
},
// 第一个参数el指的是动画包裹的元素标签,第二个参数是回调函数(这个回调函数也很重要),记住当动画结束之后要手动的调以下done这个回调函数，
// 相当于告诉Vue动画已经执行完了,done调用完成之后就可以执行after-enter这个动画钩子了
handleEnter: function(el, done) {
setTimeout( () => {
el.style.color = 'green'
},2000)
setTimeout(() => {
done()
}, 4000)
},
handleAfterEnter: function(el) {
el.style.color = '#000'
}
},
})
</script>
</body>
</html>
Мы добавили в переход три функции анимационных хуков, а именно @before-enter, @enter, @after-enter, которые можно получить в событиях привязки трех функций анимационных хуков.elЭтот параметр используется для включения элемента метки в переход для изменения его стиля. Только в событии, привязанном к процессу анимации, @enter может получитьdoneметод. Используется, чтобы сообщить vue об окончании выполнения анимации. Только после вызова этого метода будет выполнено событие, связанное с функцией обработчика анимации @after-enter. То же самое верно и для трех функций анимационных хуков leave.
d
js часто используемая библиотека анимации Velocity.js
Как использовать библиотеку Velocity.js? 1. Откройте официальный сайт, чтобы загрузить файл и импортировать его локально.
Velocity()
Перепроизводство нескольких элементов или компонентов в Vue
Посмотрите на кусок кода
- элемент
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue中多个元素或组件的过度</title>
<script src="../vue.js"></script>
<style>
.fade-enter,.fade-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition
name="fade">
<div v-if="show">hello world</div>
<div v-else>Bye World</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show:true
},
methods: {
handleClick: function() {
this.show = !this.show
}
},
})
</script>
</body>
</html>
Функция, которой хочет достичь этот код, может иметь эффект анимации при переключении div, но приведенный выше код не имеет никакого эффекта анимации. Это связано с тем, что когда Vue переключается между этими двумя элементами, он пытается максимально повторно использовать DOM, поэтому эффект анимации не появится. В разделе, посвященном обмену технологиями vue, я рассказал о том, как повторно использовать dom в Vue. Просто дайте двум тегам div разные значения ключа.
<div v-if="show" key="one">hello world</div>
<div v-else key="two">Bye World</div>
Просто измените код на приведенный выше, и вы увидите эффект анимации.
Vue также предоставляет параметр конфигурации, такой как режим перехода, чтобы установить эффект переключения нескольких атрибутов, а -mode применяется только к переключению одной и той же метки в переходе. Можно установить два значения: in-out (новый элемент переходит первым, а текущий элемент выходит после завершения), out-in (сначала переходит текущий элемент, а новый элемент переходит после завершения).
- Привязка динамического компонента
увидеть каштаны
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue中多个元素或组件的过度</title>
<script src="../vue.js"></script>
<style>
.fade-enter,.fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<!-- vue在transition里面提供了一个mode这样一个配置参数，来设置多个属性切换的效果 -->
<transition
name="fade" mode="in=out">
<component :is="type"></component>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
var vm = new Vue({
el: '#app',
data: {
type:'child'
},
methods: {
handleClick: function() {
this.type = this.type === 'child' ? 'child-one' : 'child'
}
},
})
</script>
</body>
</html>
Создайте два компонента и используйте динамический компонент компонента в переходе,: есть = "тип"Динамически привяжите элемент компонента, определите тип как «дочерний» в данных корневого компонента, затем страница сначала отобразит дочерний компонент и переключит значение типа через событие handleClick для отображения между двумя компонентами. И установите параметр конфигурации режима в переходе, чтобы реализовать анимацию переключения между компонентами. Внедрение анимационных эффектов. () может записывать в него данные.Если вам нужно сделать крутые анимационные эффекты, вы можете посетить официальный сайт Velocity.js для просмотра документации.
Список переходов в Vue
В предыдущих статьях мы использовали компонент перехода для реализации переходов, которые в основном используются для одного узла или рендеринга одного из нескольких узлов одновременно. Для переходов всего списка (например, с использованием v-for) вам необходимо использовать компонент transition-group, описанный ниже.
посмотрите на простой каштан
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue中的列表过渡</title>
<script src="../vue.js"></script>
<style>
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<transition-group name="fade">
<div v-for="item of list" :key="item.id">
{{item.title}}
</div>
</transition-group>
<button @click="handleBtnClick">Add</button>
</div>
<script>
var count = 0
var vm = new Vue({
el: "#root",
data: {
list: []
},
methods: {
handleBtnClick: function () {
this.list.push({
id: count++,
title: 'hello world'
})
}
},
})
</script>
</body>
</html>
Оберните элементы, которые нужно зациклить, в группу перехода, и каждый элемент будет анимироваться при добавлении или удалении. Принцип заключается в том,transition-gropЭквивалентно метке элемента в каждом циклеАтрибут перехода добавляется в, способ реализации анимации определяется как переход. Это будет анимироваться каждый раз, когда элемент добавляется или удаляется из списка. Подходит для анимации нескольких элементов
Пакет анимации Vue
Инкапсуляция анимации в Vue на самом деле очень проста. Вам нужно только инкапсулировать переход в компонент и использовать слот в шаблоне. Теперь давайте попробуем. Посмотрите на следующий код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue中的动画封装</title>
<script src="../vue.js"></script>
<style>
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<fade :show="show">
<div>hello world</div>
</fade>
<fade :show="show">
<div><h1>hello world</h1></div>
</fade>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('fade', {
props: ['show'],
template: `
<transition name="fade">
<slot v-if="show"></slot>
</transition>
`
})
var vm = new Vue({
el: '#app',
data: {
show: false
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
</html>
Вышеупомянутый код вызывается затуханием путем инкапсуляции перехода в имя компонента. Слоты используются в шаблонах, чтобы их можно было использовать для переноса различных элементов этикетки. И v-if используется в слоте, поэтому напрямую используйте внешний тег затухания, чтобы включить элементы, которые необходимо анимировать, и передать значение компоненту. Стиль в приведенном выше коде написан вне компонента.На самом деле, вы можете напрямую инкапсулировать анимационные эффекты в компоненте, используя хук анимации js в компоненте. Вы можете попробовать сами. Вывод закончен 😊
Эпилог
Я надеюсь, что эта статья поможет вам прочитать статью 🤘