Vue中的transition封装组件的实现方法
更新时间：2019年08月13日 09:42:54 作者：StarlightUnion
这篇文章主要介绍了Vue中的transition封装组件的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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) {
......
},
......
}
官方文档中的用法不止这几种，这里只例举了几种简单常用的。源码在此
相关文章
这篇文章主要为大家介绍了axios接口管理优化操作详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了解决vue组件销毁之后计时器继续执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue结合后台导入导出Excel问题详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
记录一下自己最近开发vue3.0的小小问题,下面这篇文章主要给大家介绍了关于vue3输入框生成的时候如何自动获取焦点的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue 通过下拉框组件学习vue中的父子通讯的相关知识,文中涉及到了父组件，子组件的实现代码，需要的朋友可以参考下2017-12-12
这篇文章主要为大家详细介绍了vue实现商城上货组件简易版，50行js代码实现效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了解决vuex改变了state的值,但是页面没有更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
vue通过指令(directives)实现点击空白处收起下拉框
这篇文章主要介绍了vue通过指令(directives)实现点击空白处收起下拉框，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了如何在VUE中使用vue-awesome-swiper，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
本篇文章主要介绍了详解使用vuex进行菜单管理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论