Vue中的transition封装组件的实现方法
2019-08-13 09:42
816 查看
vue版本信息:2.5.2
问题起源于使用Vue做网站时涉及到的一个小部件显示动画,阅读了Vue的文档后结合网上各位的经验,花了点时间研究了下。
最终的效果如上图所示,当鼠标移入灰色方块时弹出层会至上而下显示出来,类似于 拉链式窗帘(?)。
实例
实现上图所示的效果代码如下:
<!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="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> </head> <body> <div id="app"> <div @mouseenter="show" @mouseleave="hide"> <div class="enter-div"> {{content}} </div> <transition name="fade"> <div class="showContainer" v-show="flag"> 弹出层 </div> </transition> </div> </div> <script> var app = new Vue({ el: "#app", data: { flag: false, content: "鼠标移入" }, methods: { show: function () { this.flag = true; this.content = "鼠标移出"; }, hide: function () { this.flag = false; this.content = "鼠标移入"; } } }) </script> <style> 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: 96px; } </style> </body> </html>
transition的使用
以上为各类状态/过程对应的类名示意图。
1.没有名字的transition组件
<transition> <div> ...... </div> </transition> <style> .v-enter, .v-leave-to { ...... } .v-leave, .v-enter-to { ...... } ...... </style>
2.有名字的transition组件
如下代码,该transition组件的name
属性为fade,那么应设置的动画类名为fade-enter
,其他的类名也是如此。
<transition name="fade"> <div> ...... </div> </transition> <style> .fade-enter, .fade-leave-to { ...... } .fade-leave, .fade-enter-to { ...... } ...... </style>
3.自定义过渡类名
<transition name="show" enter-class="show-enter" enter-active-class="animation fly" leave-active-class="xxx" ...... > <div> ...... </div> </transition> <style> .show-enter { ...... } .animation { ...... } .fly { ...... } ...... </style>
4.自定义钩子函数
<transition v-on:enter="enter" v-on:after-enter="after" v-on:leave="leave" ...... > <div> ...... </div> </transition>
methods: { enter: function (el) { ...... }, after: function (el) { ...... }, ...... }
官方文档中的用法不止这几种,这里只例举了几种简单常用的。源码在此
您可能感兴趣的文章:
- vue 组件中使用 transition 和 transition-group实现过渡动画
- Vue运用transition实现过渡动画
- 关于vue状态过渡transition不起作用的原因解决
- vue页面切换过渡transition效果
- vue2.0 中使用transition实现动画效果使用心得
- vue内置组件transition简单原理图文详解(小结)
- 使用vue的transition完成滑动过渡的示例代码
- Vue 页面切换效果之 BubbleTransition(推荐)
- Vue Transition实现类原生组件跳转过渡动画的示例
- 深入理解Vue transition源码分析
- 详解vue2.0 transition 多个元素嵌套使用过渡
相关文章推荐
- 利用Vue实现移动端图片轮播组件的方法实例
- vue2.0 transition组件实现过渡效果
- Vue-Router来实现组件间跳转的三种方法
- 实现axios的统一封装API,axios结果格式处理,vue组件的loading动画变量在axios请求的前后改变
- Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- 实现一个 Vue 吸顶锚点组件方法
- Vue2.0+ElementUi封装table组件实现分页功能
- vue实现图片加载完成前的loading组件方法
- VUE 3D轮播图封装实现方法
- 在VUE里使用全局公共组件(自定js文件)的简单方法,bus实现父子或兄弟组件用$emit的通信方法
- Vue 实现手动刷新组件的方法
- Vue 组件(component)教程之实现精美的日历方法示例
- vue 2.0封装model组件的方法
- Vue父子组件双向绑定传值的实现方法
- vue2.0 自定义组件的方法(vue组件的封装)
- Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
- 基于Vue中点击组件外关闭组件的实现方法
- vue组件传递对象中实现单向绑定的方法
- vue组件实现文字居中对齐的方法