vue-随笔-transition

这种形式在vue2.x版本中已经不行了

<!-- /**  
 * @Author: cyany_blue  
 * @Date:   2018-05-31 22:13:27  
 * @Last Modified by:   cyany_blue  
 * @Last Modified time: 2018-05-31 22:32:04  
 */ -->  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>
      <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>  
    <style>  
        .expand-transition{
            transition: all 3s;
            font-size: 16px;
        }
        .expand-enter{
            background: #53ff53;
            font-size: 45px;
        }
        .expand-leave{
            background: #f00;
            font-size: 12px;
        }
    </style>  
</head>  
<body>  
   <div id="app">
        <transition name="expand" enter-active-class="expand-enter" leave-active-class="expand-leave">
            <p v-if="az">Lorem ipsum dolor sit amet.</p>
        </transition>
        <button v-on:click="abc">click</button>
   </div>
</body>  
<script>  
   new Vue({
    el:'#app',
    data:{
        az:true
    },
    methods:{
        abc(){
            this.az=!this.az;
        }
    }
   })
</script>  
</html>

```````````````````````````````````````````````一般还是加一个动画库比较好 http://www.bootcdn.cn/animate.css/ <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> 进去的时候的enter-active-class 出来的时候的leave-active-class 记得是加在transition元素上的！！！

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo expedita rem amet inventore, tempore asperiores debitis veniam, nobis quae eaque voluptatibus facere, molestiae, mollitia fugiat ducimus dolorum praesentium qui veritatis quo. Praesentium, ullam. Autem temporibus esse, culpa pariatur, animi voluptates aperiam neque cum fugit architecto labore, amet aliquam, sapiente assumenda!

methods:{
    abc(){
        this.abcd=!this.abcd
    }
}

```

猜你喜欢