Vue中的transition封装组件

vue版本信息:2.5.2

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

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

实例

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



  
  
  
  transition

  


  
弹出层
{{content}}

transition的使用

以上为各类状态/过程对应的类名示意图。
1.没有名字的transition组件

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

    
......
3.自定义过渡类名

    
......
4.自定义钩子函数

    
......
methods: {
    enter: function (el) {
        ......
    },
    after: function (el) {
        ......
    },
    ......
}
官方文档中的用法不止这几种,这里只例举了几种简单常用的。 源码在此

你可能感兴趣的:(vue.js)