vue css隐藏_vue中的动画特效

左手的ㄟ右手 2022-10-25 04:51 246阅读 0赞

![20e5fce647abb3dfe6d32a1e8fccfc76.png][]

## **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,最后一帧将所有类名删掉

1.  有name属性时，css前缀为name的属性值

*  通过在某一时刻，向div元素自动添加class的底层原理，vue实现动画

## **vue使用animate.css库** ##

1.  引入animate.css
2.  在使用animate动画库时

<transition enter-active-class="animated XXX(库里的动画名)">;<;/transition>;

*  在transition标签中定义出场动画和离开动画
 *  enter-active-class="animated 库动画名"
 *  enter-leave-class="animated 库动画名"

## **在Vue中同时使用过渡和动画** ##

1.  同时使用@keyframes动画和transition过渡
2.  初始动画 appear/appear-active-class
3.  可以使用type(animation/transition)属性决定动画时长
4.  使用:duration自定义动画时长，表达式可以是简单的字符串或者\{enter: 2000, leave: 10000\}

![0edc0c8d0ef1f0cbc262eb75c8dfbf32.png][]

## **Vue中的 Js 动画与 Velocity.js 的结合** ##

### **入场动画的JS钩子（添加在transition标签中）：** ###

*  @before-enter="" (el)
 *  @enter="" (el,done) 执行done()动画结束，进入after-enter
 *  @after-enter="" (el)

**「出场动画相同 leave」**

### **velocity.js动画库** ###

放在@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-active`

transition-group实现原理：

相当于在每一个列表项增加一个`<transition></transition>`标签，所以用法基本等同于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切换。所以两者的性能也有很大的不同。

[20e5fce647abb3dfe6d32a1e8fccfc76.png]: /images/20221024/308c010c777a42de9a85bc454a544874.png
[0edc0c8d0ef1f0cbc262eb75c8dfbf32.png]: /images/20221024/6c7cc93e5af84ed9900b2078b578817e.png