脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue transition封装组件

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

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

您可能感兴趣的文章:

相关文章

  • vue-cli项目中使用Mockjs详解

    vue-cli项目中使用Mockjs详解

    这篇文章主要介绍了vue-cli项目中使用Mockjs详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • elementui使用el-upload组件实现自定义上传的详细步骤

    elementui使用el-upload组件实现自定义上传的详细步骤

    upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件,这篇文章主要给大家介绍了关于elementui使用el-upload组件实现自定义上传的详细步骤,需要的朋友可以参考下
    2023-12-12
  • Vue+elementUI实现动态展示列表的数据

    Vue+elementUI实现动态展示列表的数据

    这篇文章主要介绍了Vue+elementUI实现动态展示列表的数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 关于iview按需引用后使用this.$Modal报错的解决

    关于iview按需引用后使用this.$Modal报错的解决

    这篇文章主要介绍了关于iview按需引用后使用this.$Modal报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue.js实现一个漂亮、灵活、可复用的提示组件示例

    Vue.js实现一个漂亮、灵活、可复用的提示组件示例

    这篇文章主要介绍了Vue.js实现一个漂亮、灵活、可复用的提示组件示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • 你点的 ES6一些小技巧,请查收

    你点的 ES6一些小技巧,请查收

    本文给大家总结ES6新特性：默认参数、reduce、解构赋值和Set在使用时的一些小技巧。需要的朋友参考下吧
    2018-04-04
  • 基于Vue2的独立构建与运行时构建的差别(详解)

    基于Vue2的独立构建与运行时构建的差别(详解)

    下面小编就为大家分享一篇基于Vue2的独立构建与运行时构建的差别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Vue之Axios的异步通信详解

    Vue之Axios的异步通信详解

    这篇文章主要为大家详细介绍了Vue之Axios的异步通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • Vue中的高德轨迹回放

    Vue中的高德轨迹回放

    这篇文章主要介绍了Vue中的高德轨迹回放问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • Vue中Vue.use()的原理及基本使用

    Vue中Vue.use()的原理及基本使用

    相信很多人在用Vue使用别人的组件时,会用到 Vue.use() ,例如：Vue.use(VueRouter)、Vue.use(MintUI),这篇文章主要给大家介绍了关于Vue中Vue.use()的原理及基本使用的相关资料,需要的朋友可以参考下
    2021-10-10

最新评论