Vue中的transition封装组件的实现方法


Posted in Javascript onAugust 13, 2019

vue版本信息:2.5.2

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

Vue中的transition封装组件的实现方法

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

实例

实现上图所示的效果代码如下:
<!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的使用

Vue中的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) {
    ......
  },
  ......
}

官方文档中的用法不止这几种,这里只例举了几种简单常用的。源码在此

Javascript 相关文章推荐
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
javascript与有限状态机详解
May 08 Javascript
JQuery中clone方法复制节点
May 18 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
js实现中文实时时钟
Jan 15 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 #Javascript
详解json串反转义(消除反斜杠)
Aug 12 #Javascript
json 带斜杠时如何解析的实现
Aug 12 #Javascript
electron实现静默打印的示例代码
Aug 12 #Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 #Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 #Javascript
ElementUI radio组件选中小改造
Aug 12 #Javascript
You might like
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
pandas string转dataframe的方法
2018/04/11 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
亿企通软件测试面试题
2012/04/10 面试题
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
营业员个人总结的自我评价
2013/10/25 职场文书
自荐信的两点禁忌
2013/10/30 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
加强作风建设心得体会
2014/10/22 职场文书
Javascript的promise,async和await的区别详解
2022/03/24 Javascript