vue过渡问题

Question

我想知道name属性是干嘛用的？

Answer 1

name属性是你的过渡效果class的名
例如

<style>
.slide-enter-active, .slide-leave-active {
  transform:translateY(-100px);
}
.slide-enter, .slide-leave-active {
  transform:translateY(0px);
}
</style>

<transition name="slide">
    <p v-if="show">Hi</p>    
</transtion>

new Vue({
    data:{
       show : false 
    }
})

控制data中的show的值,改变p标签的渲染状态,状态改变时会从style里设置的.slide类展示效果.