vue2.0 transition -- demo實踐填坑

實踐

這里將通過四個實踐小案例來體驗和學習css過渡，css動畫，javascript鉤子，列表過渡的應用。至于案例用到的知識點就請自行學習官網文檔。
css過渡--實踐
先來看看demo效果：

這個案例其實很簡單，通過一個transition來觸發(fā)多個子元素的過渡效果，我們只需要定義元素對應的過渡效果就可以，其他事情vue會幫我們搞定，由此可以擴展出其他酷炫的過渡場景效果。先來看看這個簡單案例的代碼實現：

<template>
    <div class="app">
        <button @click="showMenu" class="btn">{{text}}</button>
        <transition name="move">
            <div class="menu" v-show="show">
                <div class="inner inner-1">1</div>
                <div class="inner inner-2">2</div>
                <div class="inner inner-3">3</div>
            </div>
        </transition>
    </div></template><script type="text/ecmascript-6">
    export default {
        data () {            return {
              
        
		

        		
網友評論
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		學習是年輕人改變自己的最好方式