Vue笔记3 : 动画和过度

Vue动画和过度
语法:
<transition name = "nameoftransition">
      <div></div>
</transition>

<style>
 /* 可以设置不同的进入和离开动画 */
.fade-enter-active, .fade-leave-active {transition: opacity 2s}/* 设置持续时间和动画函数 */
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {opacity: 0}
</style>

<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name = "fade">
    <!-- 点击上面按钮时,下面文字淡入淡出 -->
    <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#databinding',
    data: {
        show:true,
        styleobj :{
            fontSize:'30px',
            color:'red'
        }
    },
    methods : {
    }
});
</script>

只作为简单了解 , 暂不深入学习......