标签：vuejs 引入 那些事 eth ejs change 第三方 href tle
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
v-if)v-show)实例：
<style>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity .5s;
}
</style>
<!-- fade是自定义的名称，会被当成类的前缀 "fade-enter" -->
<div id="app">
<transition name="fade">
<div v-if="show"><h1>show</h1></div>
</transition>
<button @click="handleChange">change</button>
</div>
<script>
new Vue({
el: ‘#app‘,
data:{
show: true
},
methods:{
handleChange:function(){
this.show = !this.show;
}
}
})
</script>
2. 过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换：v-enter 、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to
关于过渡类名：
如果你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。
如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter
3. 关于动画 （此处省略）
4. vue中使用第三方animate.css 库
首先link引入animate.css，然后结合自定义过渡的类名 enter-active-class、leave-active-class，
animated是必须要写的，hinge shake是引入的动画效果
<div id="app">
<transition enter-active-class="animated hinge" leave-active-class="animated shake">
<div v-if="show">show</div>
</transition>
<button @click="handleChange">change</button>
</div>
<script> new Vue({ el: ‘#app‘, data:{ show: true }, methods:{ handleChange:function(){ this.show = !this.show; } } }) </script>
标签：vuejs 引入 那些事 eth ejs change 第三方 href tle
原文地址：https://www.cnblogs.com/ly2646/p/9469551.html
