这篇文章主要介绍了Vue中的transition封装组件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue版本信息：2.5.2
问题起源于使用Vue做网站时涉及到的一个小部件显示动画，阅读了Vue的文档后结合网上各位的经验，花了点时间研究了下。
最终的效果如上图所示，当鼠标移入灰色方块时弹出层会至上而下显示出来，类似于 拉链式窗帘(?)。
实例
实现上图所示的效果代码如下：
<title>transition</title> <div id="app"> <div> <div class="enter-div"> {{content}} </div> <div class="showContainer"> 弹出层 </div></div></div> 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; /* margin-top: 200px; */ background-color:darkgrey; text-align: center; line-height: 50px; } .showContainer { position: absolute; right: 620px; top: 250px; width: 200px; /* height: 96px; */ 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<strong style="color:transparent">本文来源gaodai#ma#com搞@@代~&码*网/</strong>: 96px; }
transition的使用
以上为各类状态/过程对应的类名示意图。
1.没有名字的transition组件
<div> ...... </div> .v-enter, .v-leave-to { ...... } .v-leave, .v-enter-to { ...... } ......
2.有名字的transition组件
如下代码，该transition组件的
name属性为fade，那么应设置的动画类名为fade-enter，其他的类名也是如此。
<div> ...... </div> .fade-enter, .fade-leave-to { ...... } .fade-leave, .fade-enter-to { ...... } ......
3.自定义过渡类名
<div> ...... </div> .show-enter { ...... } .animation { ...... } .fly { ...... } ......
4.自定义钩子函数
<div> ...... </div>
methods: { enter: function (el) { ...... }, after: function (el) { ...... }, ...... }
官方文档中的用法不止这几种，这里只例举了几种简单常用的。源码在此
以上就是Vue中的transition封装组件的实现方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue中的transition封装组件的实现方法
转载请注明原文链接：Vue中的transition封装组件的实现方法
