hide show vue 动画_Vue2.x学习四：过渡&动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

请注意它的应用场景

并不是说我们写了一个动画之后让它一直在动，而是在一个模块显示或隐藏的时候去做一种特效，使得它的过程有过渡性，而不是很突兀的直接消失或显示。

它适用的场景是v-if和v-show，动态组件，组件根节点。

具体实现有以下几种方式：

1)在 CSS 过渡和动画中自动应用 class

2)可以配合使用第三方 CSS 动画库，如 Animate.css

3)在过渡钩子函数中使用 JavaScript 直接操作 DOM

4)可以配合使用第三方 JavaScript 动画库，如 Velocity.js

下面我们通过一个例子来学习：

显示

隐藏

{ {msg}}

new Vue({

el:'.container',

data:{

msg:'hello',

//定义它是否显示，默认情况下为false隐藏

isShow:false,

},

//在其中定义显示与隐藏两个方法

methods:{

// 要想动态的实现显示与隐藏，我们只要动态的改变isShow的状态

show(){

this.isShow=true;//当isShow为真，显示

},

hide(){

this.isShow=false;//当isShow为假，隐藏

}

}

});

它还有一种简便写法

切换

{ {msg}}

new Vue({

el:'.container',

data:{

msg:'hello',

isShow:false,

}

});

我们可以看到，上面显示与隐藏的方式过于直接，此时我们可以为它创建动画效果。

css过渡