vue中显示和隐藏如何做动画_Vue中CSS动画原理的实现

下面这段代码，是点击按钮实现hello world显示与隐藏

hello world

按钮

let vm = new Vue({

el: '#root',

data: {

show:true

},

methods: {

handleClick(){

this.show = !this.show

}

}

})

此时有一个需求，希望是在显示与隐藏时，能实现渐隐渐现的动画效果。

hello world

按钮

let vm = new Vue({

el: '#root',

data: {

show:true

},

methods: {

handleClick(){

this.show = !this.show

}

}

})

如果希望hello world有一个动画效果的话，需要在外面套一层transition标签，意思它包裹的内容，有一个动画效果，可以给它一个名字name="fade"。

enter

当一个元素被transition标签包裹之后，Vue 会自动的分析元素的css样式，然后构建动画