进入、离开过渡动画

可以看API：

https://cn.vuejs.org/v2/guide/transitions.html#ad

 

简单实现一个按钮控制出现和消失的动画

    

        
        
            
你好
        
    
    

 

我们还可以调用第三方的animate.css库来实现动画，这里是直接在transition上用属性：

https://daneden.github.io/animate.css/

 

        
        
            
你好
        
    

:duration="{enter,leave}"里面表示入场的时间和出场的时间时长

 

 

还有一种方式就是使用动画周期函数来实现动画：

 

 

列表动画

只要将需要变化的组建加载transform-group里面就行

下面是一个简单的列表动画：

 

    
        



            

                

                    
Panel title
                
                

                    Number
                    Name 
                    
                
            
            

                

                    

                        
Number
                        
Name
                    
                
                
                

                    

                        
{{item.num}}
                        
{{item.name}}
                        
删除
                    
                
            


        
        
    

但是这里的表格有点特殊，因为tbody和我们的transition-group有点重复，所以我们只能像上面这样加上is="transition-group" 

另外，如果在transition-group上加上一个appear：

那么我们刷新页面的时候就会从下往上漂上来就会更加有动感的入效果

另外，transition标签渲染页面的时候默认是一个span元素，但是W3C标准是一个行级元素不能包括块级元素的，所以我们可以在tag属性里面：

这样就会渲染成一个div元素了