vue2.0 transition -- demo实践填坑

实践

这里将通过四个实践小案例来体验和学习css过渡，css动画，javascript钩子，列表过渡的应用。至于案例用到的知识点就请自行学习官网文档。
css过渡--实践
先来看看demo效果：

这个案例其实很简单，通过一个transition来触发多个子元素的过渡效果，我们只需要定义元素对应的过渡效果就可以，其他事情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 {
              
        
		

        		
网友评论
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		学习是年轻人改变自己的最好方式