Vue中的transition封装组件的实现方法

vue版本信息：2.5.2

问题起源于使用Vue做网站时涉及到的一个小部件显示动画，阅读了Vue的文档后结合网上各位的经验，花了点时间研究了下。

最终的效果如上图所示，当鼠标移入灰色方块时弹出层会至上而下显示出来，类似于 拉链式窗帘(?)。

实例

实现上图所示的效果代码如下：

 
 
 
 

 


 

   

     

      {{content}}
     
     
      

       弹出层
      
     
   
 

 

 

transition的使用

以上为各类状态/过程对应的类名示意图。

1.没有名字的transition组件

  

  ......
  

2.有名字的transition组件

如下代码，该transition组件的 name属性为fade，那么应设置的动画类名为 fade-enter，其他的类名也是如此。

  

  ......
  

3.自定义过渡类名

  

  ......
  

4.自定义钩子函数

  

  ......
  

methods: {
  enter: function (el) {
    ......
  },
  after: function (el) {
    ......
  },
  ......
}

官方文档中的用法不止这几种，这里只例举了几种简单常用的。源码在此