2023年6月21日发(作者：)

vue中的动画特效vue中css动画原理在需要设置动画标签外部⽤包裹，可以添加name属性1. 没有name属性，css 默认前缀是v，类名：隐藏到显⽰：第⼀帧加载v-enter;v-enter-cative,第⼆帧将v-enter清除，添加v-enter-to,最后⼀帧将所有类名删掉显⽰到隐藏：第⼀帧加载v-leave,v-leace-active,第⼆帧将v-leave清除，添加v-leave-to,最后⼀帧将所有类名删掉2. 有name属性时，css前缀为name的属性值通过在某⼀时刻，向div元素⾃动添加class的底层原理，vue实现动画vue使⽤库1. 引⼊2. 在使⽤animate动画库时;<;/transition>;在transition标签中定义出场动画和离开动画enter-active-class="animated 库动画名"enter-leave-class="animated 库动画名"在Vue中同时使⽤过渡和动画1. 同时使⽤@keyframes动画和transition过渡2. 初始动画 appear/appear-active-class3. 可以使⽤type(animation/transition)属性决定动画时长4. 使⽤:duration⾃定义动画时长，表达式可以是简单的字符串或者{enter: 2000, leave: 10000}[图⽚上传失败...(image-3d9fea-87)]Vue中的 Js 动画与 的结合⼊场动画的JS钩⼦（添加在transition标签中）：@before-enter="" (el)@enter="" (el,done) 执⾏done()动画结束，进⼊after-enter@after-enter="" (el)出场动画相同 动画库放在@enter钩⼦绑定的事件Velocity(el, {opacity: 1}, {duration: 1000, complete: done})Vue中多个元素或组件的过渡1. 因vue中的复⽤机制，此处动画不会执⾏，可给元素添加唯⼀的key值来使vue对该元素不进⾏复⽤2. 先进⼊执⾏还是先出去执⾏，可在transition元素上设置： mode="in-out" 或mode="out-in"3. 组件的过渡和普通元素的⽤法⼀致4. 动态组件的过渡须在动态组件内绑定is属性 ( :is="数据名" )Vue中的列表过渡1. 将列表项使⽤transition-group标签包裹，2. 然后写css动画样式：v-enter，v-leave-to，v-enter-active，v-leave-activetransition-group实现原理：相当于在每⼀个列表项增加⼀个标签，所以⽤法基本等同于transition动画函数的封装：使⽤组件进⾏装，可以采⽤css或者js的⽅式，动画封装之后可以直接在需要使⽤动画的元素外部使⽤封装的组件进⾏使⽤。在slot标签上⽆法使⽤v-show的原因：slot只是⼀个占位符，实际上并不是⼀个真正的元素。⽽v-show是通过display属性进⾏显⽰或隐藏的，⽽slot本质上并不是⼀个元素所以没有display属性就不能使⽤v-show。PS：之前把v-if底层当做是visibility: hidden;实现的，但它们只是效果⼀样，v-if切换有局部编译和卸载的过程，应该是属于js效果；v-show只是简单的css切换。所以两者的性能也有很⼤的不同。

2023年6月21日发(作者：)

vue中的动画特效vue中css动画原理在需要设置动画标签外部⽤包裹，可以添加name属性1. 没有name属性，css 默认前缀是v，类名：隐藏到显⽰：第⼀帧加载v-enter;v-enter-cative,第⼆帧将v-enter清除，添加v-enter-to,最后⼀帧将所有类名删掉显⽰到隐藏：第⼀帧加载v-leave,v-leace-active,第⼆帧将v-leave清除，添加v-leave-to,最后⼀帧将所有类名删掉2. 有name属性时，css前缀为name的属性值通过在某⼀时刻，向div元素⾃动添加class的底层原理，vue实现动画vue使⽤库1. 引⼊2. 在使⽤animate动画库时;<;/transition>;在transition标签中定义出场动画和离开动画enter-active-class="animated 库动画名"enter-leave-class="animated 库动画名"在Vue中同时使⽤过渡和动画1. 同时使⽤@keyframes动画和transition过渡2. 初始动画 appear/appear-active-class3. 可以使⽤type(animation/transition)属性决定动画时长4. 使⽤:duration⾃定义动画时长，表达式可以是简单的字符串或者{enter: 2000, leave: 10000}[图⽚上传失败...(image-3d9fea-87)]Vue中的 Js 动画与 的结合⼊场动画的JS钩⼦（添加在transition标签中）：@before-enter="" (el)@enter="" (el,done) 执⾏done()动画结束，进⼊after-enter@after-enter="" (el)出场动画相同 动画库放在@enter钩⼦绑定的事件Velocity(el, {opacity: 1}, {duration: 1000, complete: done})Vue中多个元素或组件的过渡1. 因vue中的复⽤机制，此处动画不会执⾏，可给元素添加唯⼀的key值来使vue对该元素不进⾏复⽤2. 先进⼊执⾏还是先出去执⾏，可在transition元素上设置： mode="in-out" 或mode="out-in"3. 组件的过渡和普通元素的⽤法⼀致4. 动态组件的过渡须在动态组件内绑定is属性 ( :is="数据名" )Vue中的列表过渡1. 将列表项使⽤transition-group标签包裹，2. 然后写css动画样式：v-enter，v-leave-to，v-enter-active，v-leave-activetransition-group实现原理：相当于在每⼀个列表项增加⼀个标签，所以⽤法基本等同于transition动画函数的封装：使⽤组件进⾏装，可以采⽤css或者js的⽅式，动画封装之后可以直接在需要使⽤动画的元素外部使⽤封装的组件进⾏使⽤。在slot标签上⽆法使⽤v-show的原因：slot只是⼀个占位符，实际上并不是⼀个真正的元素。⽽v-show是通过display属性进⾏显⽰或隐藏的，⽽slot本质上并不是⼀个元素所以没有display属性就不能使⽤v-show。PS：之前把v-if底层当做是visibility: hidden;实现的，但它们只是效果⼀样，v-if切换有局部编译和卸载的过程，应该是属于js效果；v-show只是简单的css切换。所以两者的性能也有很⼤的不同。