zoukankan      html  css  js  c++  java
  • 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元素上的!!!
    ```
    <transition enter-active-class="animated bounce" leave-active-class="animated swing" >
       			<p v-if="abcd">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!</p>
       		</transition>
    
    
    <button v-on:click="abc">click</button>
    	methods:{
       		abc(){
       			this.abcd=!this.abcd
       		}
       	}
    ```
    ![](https://images2018.cnblogs.com/blog/1202026/201805/1202026-20180531224338367-1053923116.png)
  • 相关阅读:
    3.19 DAY2
    3.18 DAY1
    MySql Scaffolding an Existing Database in EF Core
    asp.net core 2.0 后台定时自动执行任务
    c#中枚举类型 显示中文
    fullCalendar使用经验总结
    Web APP 日期选择控件
    【转】剖析异步编程语法糖: async和await
    【转】Entity Framework 复杂类型
    【转】EF Code First 学习笔记:约定配置
  • 原文地址:https://www.cnblogs.com/cyany/p/9119453.html
Copyright © 2011-2022 走看看