某视频剪辑软件版本信息：2.5.2

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

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

实现上图所示的效果代码如下：DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title transition/title script src=' http 3360https://cdn。bootscs。com/vue/2。5 .2/vue。量滴js '/script/head dy div id=' app ' div @鼠标输入弹出层/div /transition /div /div脚本var app=new Vue({ el: '#app '，data: { flag: false，content: '鼠标移入}，方法： { show : function(){ this。flag=truethis.content='鼠标移出；}，隐藏：函数(){ this。flag=falsethis.content='鼠标移入；} } })/脚本样式正文，html { height : 100%；保证金： 0；} # app { width : 100%；高度： 100%;display : flex justice-内容中心：align-items:居中；} .enter-div { width : 200 px；高度： 50px/*页边距-top : 200px；*/底色：深灰色；文本对齐：中心；线高： 50px} .showContainer {位置：绝对值；右： 620pxtop: 250px宽度： 200像素；/*高度： 96px*/行高： 96px文本对齐：中心；颜色：黑色；盒影： 0 5px-1px # CCC；z指数： 10；飞越：隐藏；} /* 进入和离开时过渡状态的动画状态*/.淡入激活。淡入淡出活跃{ transition: all .10s ease高度： 96px} /* 进入时的初始状态和离开时动画的结束状态*/.淡入。淡入淡出{ height : 0；} /* 离开时的初始状态和进入时动画的结束状态*/.淡入淡出。淡入淡出{ height: 96px}/样式/正文/htmltransition的使用

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

过渡区./div/过渡样式.v-输入，v-离开{.} .离开v-enter-to {.} ./style2 .有名字的过渡组件

如下代码，该过渡组件的名字属性为褪色，那么应设置的动画类名为淡入，其他的类名也是如此过渡名称="渐变“div./div/过渡样式.淡入。淡入淡出.} .淡入淡出。淡入到.} ./style3 .自定义过渡类名

过渡名称=' show ' enter-class=' show-enter ' enter-active-class='动画飞行' leave-active-class=' XXX '.差异./div/过渡样式.显示-输入{.} .动画{.} .飞行.} ./style4 .自定义钩子函数

过渡v-:输入='在-enter='后输入' v-: '后：leave='离开'.差异./div/transitionmethods: {输入：函数(埃尔)}.},在：函数(el)之后.},}官方文档中的用法不止这几种，这里只例举了几种简单常用的。源码在此