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 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
Json实现传值到后台代码实例
Jun 30 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
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
PHP内置加密函数详解
2016/11/20 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python获取糗百图片代码实例
2013/12/18 Python
python进阶教程之异常处理
2014/08/30 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
Python的高阶函数用法实例分析
2019/04/11 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Django models filter筛选条件详解
2020/03/16 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
会计职业生涯规划范文
2014/01/04 职场文书
安全大检查实施方案
2014/02/22 职场文书
安踏广告词改编版
2014/03/21 职场文书
取保候审保证书
2014/04/30 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
英文升职感谢信
2015/01/23 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
MySQL查询日期时间
2022/05/15 MySQL