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

vue版本信息：2.5.2

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

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

实例

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

 
 
 
 

 


 
   
     
      {{content}}
     
     
      
弹出层
      
     
   
 

 

 
  body, html {
   height: 100%;
   margin: 0;
  }

  #app {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
  }

  .enter-div {
   width: 200px;
   height: 50px;
   
   background-color:darkgrey;
   text-align: center;
   line-height: 50px;
  }

  .showContainer {
   position: absolute;
   right: 620px;
   top: 250px;
   width: 200px;
   
   line-height: 96px;
   text-align: center;
   color: black;
   box-shadow: 0 0 5px -1px #ccc;
   z-index: 10;
   overflow: hidden;
  }

  
  .fade-enter-active, .fade-leave-active {
   transition: all .10s ease;
   height: 96px;
  }

  
  .fade-enter, .fade-leave-to {
   height: 0;
  }

  
  .fade-enter-to, .fade-leave {
   height: 96px;
  }
 

transition的使用

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

1.没有名字的transition组件

  
  ......
  



  .v-enter, .v-leave-to {
  ......
  }
  
  .v-leave, .v-enter-to {
  ......
  }
  
  ......

2.有名字的transition组件

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

  
  ......
  



  .fade-enter, .fade-leave-to {
  ......
  }
  
  .fade-leave, .fade-enter-to {
  ......
  }
  
  ......

3.自定义过渡类名

  
  ......
  



  .show-enter {
  ......
  }
  
  .animation {
  ......
  }
  
  .fly {
  ......
  }
  
  ......

4.自定义钩子函数

  
  ......
  

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

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