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 相关文章推荐
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
vue实现分页的三种效果
Jun 23 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
十天学会php之第五天
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
PHP中PDO的错误处理
2011/09/04 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
python指定写入文件时的编码格式方法
2018/06/07 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python利用命名空间解析XML文档
2020/08/10 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
大学生个人实习的自我评价
2014/02/15 职场文书
志愿者活动总结
2014/04/28 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
Python字符串格式化方式
2022/04/07 Python