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)
  • 相关阅读:
    位运算简介以及常用技巧
    JMeter 十六:加密处理
    JMeter 十五:函数以及变量
    JMeter 十四:最佳实践
    JMeter 十三:生成 report dashboard
    JMeter 十二:命令行执行
    JMeter 十一:参数化
    JMeter 十:录制脚本--使用bodboy
    LoadRunner录制:检查点
    LoadRunner录制: 选择协议
  • 原文地址:https://www.cnblogs.com/cyany/p/9119453.html
Copyright © 2011-2022 走看看