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

Vue中添加过渡效果的方法

 更新时间：2017年03月16日 10:21:31   作者：HNS  
本篇文章主要介绍了Vue中添加过渡效果的方法，Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，有兴趣的同学可以了解一下。

关于vue的过渡效果，vue官方给的概述是这样的。

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

包括以下工具：

1、在 CSS 过渡和动画中自动应用 class

2、可以配合使用第三方 CSS 动画库，如 Animate.css

3、在过渡钩子函数中使用 JavaScript 直接操作 DOM

4、可以配合使用第三方 JavaScript 动画库，如 Velocity.js

其中里面也给出了许多的例子，但是例子给到了“多个元素过渡”的时候，就没有案例的代码了，在这里对vue官方文档的这部分案例做一部分补充。

以下我的代码

<!DOCTYPE html>
<html>
<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">
 <script src="../js/vue.js" charset="utf-8"></script>
 <title>过渡效果-多个元素的过渡</title>
 <style>
  /*淡入淡出按钮,这个使得按钮的效果很差*/
  /*在 “on” 按钮和 “off” 按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是 <transition> 的默认行为 - 进入和离开同时发生。*/
  .fade-enter-active,.fade-leave-active{
   transition: all .5s
  }
  .fade-enter,.fade-leave-active{
   opacity: 0
  }
  /*淡入淡出+绝对定位*/
  #app2{
   position: relative;
   height: 100px;
   width: 100px;
   background:green;
  }
  #app2 button{
   position: absolute;
   left:50%;
   top: 50%;
  }
  .fade-abosolute-enter,.fade-abosolute-leave-active{
   opacity: 0
  }
  .fade-abosolute-enter-active,.fade-abosolute-leave-active{
   transition: all 1s
  }
  /*淡入淡出+绝对定位+滑动效果*/
  /*这三种效果合在一起，产生的效果是比较好的*/
  #app3{
   width: 200px;
   height: 100px;
   background: rgb(26, 46, 224);
   position: relative;
  }
  #app3 button{
   position: absolute;
   left: 50%;
   top: 50%;
  }
  .fade-slide-enter-active,.fade-slide-leave-active{
   transition: all 1s
  }
  .fade-slide-enter{
   opacity: 0;
   transform: translateX(30px);
  }
  .fade-slide-leave-active{
   opacity: 0;
   transform: translateX(-30px);
  }
  #app4{
   position: relative;
   width: 200px;
   height: 100px;
   background: rgb(8, 201, 80);
  }
  #app4 button{
   position: absolute;
   left: 50%;
   top: 50%;
  }
  .fade-slide-mode-enter-active,.fade-slide-mode-leave-active{
   transition: all .5s
  }
  .fade-slide-mode-enter{
   opacity: 0;
   transform: translateX(30px);
  }
  .fade-slide-mode-leave-active{
   opacity: 0;
   transform: translateX(-30px);
  }
 </style>
</head>
<body>
  <!--  淡入淡出按钮,这个使得按钮的效果很差 -->
 <div id="app1">
  <!-- 这个淡出淡出效果，在原本没加上过渡模式的时候效果非常糟糕，在加入了mode="out-in"之后，效果比较好，out-in指的是先过渡现有的元素，在过渡新元素 -->
  <transition name="fade" mode="out-in">
    <button v-if="isEditing" key="save" @click="isEditing = !isEditing">
     save
    </button>
    <button v-else key="edit" @click="isEditing = !isEditing">
     Edit
    </button>
  </transition>
 </div>
 <!-- 淡入淡出+绝对定位 -->
 <div id="app2">
  <transition name="fade-abosolute">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
 <!-- 淡入淡出+绝对定位+滑动 -->
 <div id="app3">
  <transition name="fade-slide">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
 <!-- in-out,out-in的过渡模式，同时生效的进入和离开的过渡不能满足所有要求，所以vue提供了过渡模式 -->
 <div id="app4">
  <transition name="fade-slide-mode" mode="in-out">
   <button v-if="on" key="on" @click="on = !on">
    on
   </button>
   <button v-else key="off" @click="on = !on">
    off
   </button>
  </transition>
 </div>
</body>
<script type="text/javascript">
 var vm1 = new Vue({
  el:'#app1',
  data () {
   return{
    isEditing:true,
   }
  }
 })
 var vm2 = new Vue({
  el:'#app2',
  data () {
   return {
    on:true
   }
  }
 })
 var vm3 = new Vue({
  el:'#app3',
  data () {
   return {
    on:true
   }
  }
 })
 var vm4 = new Vue({
  el:'#app4',
  data () {
   return {
    on:true
   }
  }
 })
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vite项目如何集成eslint和prettier

    vite项目如何集成eslint和prettier

    这篇文章主要介绍了vite项目如何集成eslint和prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue watch响应数据实现方法解析

    Vue watch响应数据实现方法解析

    这篇文章主要介绍了Vue watch响应数据实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue3选项式api如何监控数组变化

    vue3选项式api如何监控数组变化

    这篇文章主要介绍了vue3选项式api如何监控数组变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • 在Vue.js应用中实现分布式搜索和全文搜索

    在Vue.js应用中实现分布式搜索和全文搜索

    分布式搜索和全文搜索在现代应用程序中变得越来越重要,因为它们可以帮助用户快速查找和检索大量数据,Elasticsearch是一种强大的分布式搜索引擎,本文将介绍如何在Vue.js应用程序中实现分布式搜索和全文搜索,以及如何与Elasticsearch集成,需要的朋友可以参考下
    2023-11-11
  • Vue2 模版指令元素绑定事件执行顺序解析

    Vue2 模版指令元素绑定事件执行顺序解析

    这篇文章主要为大家介绍了Vue2 模版指令元素绑定事件执行顺序解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • vue+antd实现折叠与展开组件

    vue+antd实现折叠与展开组件

    这篇文章主要为大家详细介绍了vue+antd实现折叠与展开组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Vue.js中的组件系统

    Vue.js中的组件系统

    这篇文章主要介绍了Vue.js之组件系统,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • Vue3 源码解读之 Teleport 组件使用示例

    Vue3 源码解读之 Teleport 组件使用示例

    这篇文章主要为大家介绍了Vue3 源码解读之 Teleport 组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • vue watch关于对象内的属性监听

    vue watch关于对象内的属性监听

    这篇文章主要介绍了vue watch关于对象内的属性监听的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • Vue组件文档生成工具库的方法

    Vue组件文档生成工具库的方法

    本文主要介绍了Vue组件文档生成工具库的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论