22.vue学习篇-过渡动画

本文主要是介绍22.vue学习篇-过渡动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题：在JS里面实现元素的过渡动画，有哪几种思路？

1. JS操作style，transition: all 1s ease(缓动随意)

2. JS操作className，切换类名-[在不用第三方库的时候，最推荐这个方法，vue源码也是用的这个方法实现]

vue源码中，通过这个方法实现

transitionstart方法，transitionend方法，监听过渡是否完成

3. JS代码，结合requestAnimationFrame

4. 结合第三方库，比较多的用gsap，velocity.js类库

一、transtion

1.基本用法

1.包裹元素

使用<transition>标签包裹需要添加过渡效果的元素。例如：

<transition><div v-if="show">Hello World</div>
</transition>

在这个例子中，当show变量为true时，<div>元素会被显示，<transition>会为这个元素的出现和消失添加过渡效果。

2.命名过渡

可以为<transition>添加name属性来命名过渡。这在需要为不同的过渡效果设置不同的类名时非常有用。例如：
```
<transition name="fade"><div v-if="show">Hello world</div>
<transition>
```

在这个例子中，当show变量为true时，<div>元素会被显示，<transition>会为这个元素的出现和消失添加过渡效果。

2.过渡类名

1.v-enter：

在元素插入之前生效。可以设置元素的初始样式，例如透明度为 0。

2.v-enter-active：

在元素插入过程中生效。可以设置过渡效果的属性，例如设置过渡时间、动画函数等。

3.v-enter-to：

在元素插入完成后生效。可以设置元素的最终样式，例如透明度为 1。

4.v-leave：

在元素移除之前生效。可以设置元素的初始样式，例如透明度为 1。

5.v-leave-active：

在元素移除过程中生效。可以设置过渡效果的属性，例如设置过渡时间、动画函数等。

6.v-leave-to：

在元素移除完成后生效。可以设置元素的最终样式，例如透明度为 0。

// 例如，使用 CSS 实现一个淡入淡出的过渡效果：
.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {opacity: 0;
}

3.钩子函数

1.@before-enter：

在元素插入之前调用。可以在这个钩子函数中设置元素的初始状态。

2.@enter

在元素插入过程中调用。可以在这个钩子函数中执行过渡效果的动画逻辑。

3.@after-enter

在元素插入完成后调用。可以在这个钩子函数中执行一些后续操作，例如清除过渡状态。

4.@enter-cancelled

在过渡被中断时调用。例如，当元素的显示条件在过渡过程中发生变化时，过渡会被中断。

5.@before-leave

在元素移除之前调用。可以在这个钩子函数中设置元素的初始状态。

6.@leave

在元素移除过程中调用。可以在这个钩子函数中执行过渡效果的动画逻辑。

7.@after-leave

在元素移除完成后调用。可以在这个钩子函数中执行一些后续操作，例如清除过渡状态。

8.@leave-cancelled

在过渡被中断时调用。例如，当元素的隐藏条件在过渡过程中发生变化时，过渡会被中断。

// html
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"><div v-if="show">Hello World</div>
</transition>// js
export default {data() {return {show: true};},methods: {beforeEnter(el) {el.style.opacity = 0;},enter(el, done) {const duration = 500;const start = Date.now();const opacity = +el.style.opacity;const tick = () => {const elapsed = Date.now() - start;el.style.opacity = elapsed / duration + opacity;if (elapsed < duration) {requestAnimationFrame(tick);} else {done();}};tick();},afterEnter(el) {el.style.opacity = 1;}}
};

4.应用场景

1.页面切换

可以为页面之间的切换添加过渡效果，提高用户体验。例如，在单页应用中，当用户切换页面时，可以使用<transition>为页面的切换添加淡入淡出的效果。

2.元素显示和隐藏

可以为元素的显示和隐藏添加过渡效果，使得界面更加流畅。例如，当用户点击按钮显示或隐藏一个元素时，可以使用<transition>为这个元素的出现和消失添加过渡效果。

3.列表动画

可以为列表的添加、删除和排序等操作添加过渡效果，提高用户体验。例如，当用户添加或删除一个列表项时，可以使用<transition-group>为列表项的添加和删除添加过渡效果。

总之，<transition>是 Vue 中一个非常强大的特性，它可以为元素的插入、更新和移除添加过渡效果，提高用户体验。通过使用过渡类名和钩子函数，可以实现各种自定义的过渡效果。

二、transtionGroup

在 Vue 中，<TransitionGroup>是一个用于为多个元素添加过渡效果的组件。它通常与动态列表渲染一起使用，为列表项的添加、删除和排序等操作添加动画效果。

1.基本用法

1.包裹动态列表

使用<TransitionGroup>标签包裹一个动态列表，例如使用v-for渲染的列表。例如：

   <transition-group name="list"><div v-for="item in items" :key="item.id">{{ item.name }}</div></transition-group>

在这个例子中，<TransitionGroup>会为列表中的每个<div>元素添加过渡效果。当列表项添加、删除或排序时，<TransitionGroup>会自动应用过渡效果。

2.命名过渡

可以为<TransitionGroup>添加name属性来命名过渡。这在需要为不同的过渡效果设置不同的类名时非常有用。例如：
```
   <transition-group name="fade"><div v-for="item in items" :key="item.id">{{ item.name }}</div></transition-group>
```

2.过渡类名

1.v-enter：

在元素插入之前生效。可以设置元素的初始样式，例如透明度为 0。

2.v-enter-active：

在元素插入过程中生效。可以设置过渡效果的属性，例如设置过渡时间、动画函数等。

3.v-enter-to：

在元素插入完成后生效。可以设置元素的最终样式，例如透明度为 1。

4.v-leave：

在元素移除之前生效。可以设置元素的初始样式，例如透明度为 1。

5.v-leave-active：

在元素移除过程中生效。可以设置过渡效果的属性，例如设置过渡时间、动画函数等。

6.v-leave-to：

在元素移除完成后生效。可以设置元素的最终样式，例如透明度为 0。

// 例如，使用 CSS 实现一个淡入淡出的过渡效果：
.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {opacity: 0;
}

3.钩子函数

1.@before-enter：

在元素插入之前调用。可以在这个钩子函数中设置元素的初始状态。

2.@enter：

在元素插入过程中调用。可以在这个钩子函数中执行过渡效果的动画逻辑。

3.@after-enter：

在元素插入完成后调用。可以在这个钩子函数中执行一些后续操作，例如清除过渡状态。

4.@enter-cancelled：

在过渡被中断时调用。例如，当元素的显示条件在过渡过程中发生变化时，过渡会被中断。

5.@before-leave：

在元素移除之前调用。可以在这个钩子函数中设置元素的初始状态。

6.@leave：

在元素移除过程中调用。可以在这个钩子函数中执行过渡效果的动画逻辑。

7.@after-leave：

在元素移除完成后调用。可以在这个钩子函数中执行一些后续操作，例如清除过渡状态。

8.@leave-cancelled：

在过渡被中断时调用。例如，当元素的隐藏条件在过渡过程中发生变化时，过渡会被中断。

// 例如，使用 JavaScript 实现一个自定义的过渡效果：// html
<transition-group name="list" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"><div v-for="item in items" :key="item.id">{{ item.name }}</div>
</transition-group>// js
export default {data() {return {items: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }]};},methods: {beforeEnter(el) {el.style.opacity = 0;},enter(el, done) {const duration = 500;const start = Date.now();const opacity = +el.style.opacity;const tick = () => {const elapsed = Date.now() - start;el.style.opacity = elapsed / duration + opacity;if (elapsed < duration) {requestAnimationFrame(tick);} else {done();}};tick();},afterEnter(el) {el.style.opacity = 1;}}
};