问题:在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; } } };
4.应用场景
1.动态渲染列表
- 可以为动态列表的添加、删除和排序等操作添加过渡效果,提高用户体验。例如,在一个购物车列表中,当用户添加或删除商品时,可以使用
<TransitionGroup>
为列表项的添加和删除添加过渡效果。
2.无限滚动列表
- 可以为无限滚动列表的加载新数据时添加过渡效果,使得界面更加流畅。例如,当用户滚动到底部加载新数据时,可以使用
<TransitionGroup>
为新添加的列表项添加过渡效果。
3.树形结构渲染
- 可以为树形结构的展开和折叠等操作添加过渡效果,提高用户体验。例如,在一个文件目录树中,当用户展开或折叠一个文件夹时,可以使用
<TransitionGroup>
为文件夹中的文件列表添加过渡效果。
总之,<TransitionGroup>
是 Vue 中一个非常强大的组件,它可以为多个元素添加过渡效果,特别是在动态列表渲染中非常有用。通过使用过渡类名和钩子函数,可以实现各种自定义的过渡效果。