vue元素实现动画过渡效果

2024-09-27 09:03:00

1 在 vue 中，使用 <transition> 标签包含着的单个子元素在使用 v-show 或 v-if 切换显示隐藏前，会先判断是否有对应的 class 样式能匹配到该子元素上：

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  redv-leave { margin-top: 50px; }
  redv-leave-active { transition: all 3s;}
  redv-leave-to { margin-top: 100px; opacity: 0;}
  redv-enter { margin-top: 50px; }
  redv-enter-active { transition: all 3s;}
  redv-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<div id="app">
  <transition>
    <div class="red" v-show="show"></div>
  </transition>
  <button v-on:click="change">button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>
</script>
</body>

v-leave 当前元素准备从显示转变成隐藏，在动画开始前添加到元素上，动画一旦开始会立即删除；
v-leave-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
v-leave-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；

事例中，当点击 button，div 并不会马上 display: none，而是首先设置 v-leave ，下一刻即删除 v-leave ，同时添加 v-leave-active v-leave-to，当 v-leave-active 中的过渡时间执行完成，则删除 v-leave-active v-leave-to，同时添加 display: none。

v-enter 当前元素准备从隐藏转变成显示，在动画开始前添加到元素上，动画一旦开始会立即删除；
v-enter-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
v-enter-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；

事例中，当点击 button，div 马上清除 display: none，然后设置 v-enter ，下一刻即删除 v-enter ，同时添加 v-enter-active v-enter-to，当 v-enter-active 中的过渡时间执行完成，则删除 v-enter-active v-enter-to。

2 自定义动画类名：

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  redslide-leave { margin-top: 50px; }
  redslide-leave-active { transition: all 3s;}
  redslide-leave-to { margin-top: 100px; opacity: 0;}
  redslide-enter { margin-top: 50px; }
  redslide-enter-active { transition: all 3s;}
  redslide-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<div id="app">
  <transition name="slide">
    <div class="red" v-show="show"></div>
  </transition>
  <button v-on:click="change">button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>

该效果与上一例效果完全一致的，transition 元素可以使用 name 属性来指定使用的类名前缀，从而代替 v-字段，例如事例中的 name="slide" 使本来的 v-enter 变成了 slide-enter。

3 transition 与 animation 同时使用时

<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
  0% {
    margin-left: 10px;
  }
  100% {
    margin-left: 100px;
  }
}
  red {background-color: red; width: 100px; height: 100px;}
  blue {background-color: blue; width: 100px; height: 100px;}
  v-leave { margin-top: 50px; }
  v-leave-active { transition: all 3s; animation: aslide 5s;}
  v-leave-to { margin-top: 100px;}
</style>
<body>
<div id="app">
  <transition type="transition" >
    <div class="red" v-show="show"></div>
  </transition>
  <br>
  <transition type="animation" >
    <div class="blue" v-show="show"></div>
  </transition>
  <button v-on:click="change">button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>

事例中，动画同时指定了 transition 和 animation 动画， transition 元素的 type 属性可以指定以哪种动画的时间为元素的结束时间，如果不指定动画监控的方式，则会以最长时间的为准。

4 javascript 监听动画

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  v-leave { margin-top: 50px; }
  v-leave-active { transition: all 3s;}
  v-leave-to { margin-top: 100px;}
</style>
<body>
<div id="app">
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"
    v-on:enter-cancelled="enterCancelled"
    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
    v-on:leave-cancelled="leaveCancelled"
    >
    <div class="red" v-show="show"></div>
  </transition>
  <button v-on:click="change">button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    change: function() {
      thisshow = !thisshow;
      consolelog('-----------click---------');
    },
    beforeEnter: function (el) {
      consolelog('beforeEnter:');
    },
    enter: function (el, done) {
      consolelog('enter:');
      // done()
    },
    afterEnter: function (el) {
      consolelog('afterEnter:');
    },
    enterCancelled: function (el) {
      consolelog('enterCancelled:');
    },
    beforeLeave: function (el) {
      consolelog('beforeLeave:');
    },
    leave: function (el, done) {
      consolelog('leave:');
      done()
    },
    afterLeave: function (el) {
      consolelog('afterLeave:');
    },
    leaveCancelled: function (el) {
      consolelog('leaveCancelled:');
    }
  }
});
</script>

一旦使用 js 事件，原 css 动画过渡效果就会无效，官方推荐在 <div class="red" v-show="show"></div> 上设置 v-bind:css="false" 可令 vue 内部机制免去监测 css 动画事件回调，提高性能。
enter 和 leave 事件需手动调用 done 方法，不然事件一直不会调用后续的 after 事件，没有调用 after 事件但是又有其他事件开始了，则被视为动画被 cancel 了。

5 页面初始化时的动画：

<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
  0% {
    margin-left: 10px;
  }
  100% {
    margin-left: 100px;
  }
}
  red {background-color: red; width: 100px; height: 100px;}
  apper { margin-top: 50px; }
  apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;}
</style>
<body>
<div id="app">
  <transition
    appear
    appear-class="apper"
    appear-active-class="apper-active"
    v-on:before-appear="customBeforeAppearHook"
    v-on:appear="customAppearHook"
    v-on:after-appear="customAfterAppearHook" >
    <div class="red" ></div>
  </transition>
  <button v-on:click="change">button</button>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    show: true
  },
  methods: {
    change: function() {
      thisshow = !thisshow;
      consolelog('-----------click---------');
    },
    customBeforeAppearHook: function (el) {
      consolelog('customBeforeAppearHook:');
    },
    customAppearHook: function (el) {
      consolelog('customAppearHook:');
      // done()
    },
    customAfterAppearHook: function (el) {
      consolelog('customAfterAppearHook:');
    }
  }
});
</script>

appear 属性表示开启初始化动画，appear-class 属性指定初始化前的样式，appear-active-class 属性指定初始化动画过程的样式；
transition 动画无法在初始化动画中起效，而 animation 动画则可以；
before-appear appear after-appear 是事件回调，看事例相当清晰。

6 动画元素的 key ：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter-active { transition: all 15s;}
  v-enter-to { margin-top: 100px;}
  v-leave-active { transition: all 15s;}
  v-leave-to { margin-top: 10px;}
</style>
<body>
<div id="app">
  <div class="show1">
    <transition>
      <button v-if="show1" @click="show1 = false">on</button>
      <button v-else @click="show1 = true">off</button>
    </transition>
  </div>
  <div class="show2">
    <transition>
      <button v-if="show2" key="on" @click="show2 = false">on</button>
      <button v-else key="off" @click="show2 = true">off</button>
    </transition>
  </div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    show1: true,
    show2: true
  }
});
</script>

show1 为什么没有动画效果呢？因为 vue 会把切换中的两个 button 识别成同一个元素，只是修改了 button 中的不同内容，所以实际上页面并没有发生 DOM 元素的切换；

如果要让 vue 明确识别出这是2个不同的 button 元素，则为每个元素指定不同的 key 属性的值。

7 元素切换的动画模式：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 5s;}
  v-enter-to { margin-left: 10px;}
  v-leave { margin-left: 10px;}
  v-leave-active { transition: all 5s;}
  v-leave-to { margin-left: 100px;}
</style>
<body>
<div id="app">
  <div class="default">
    <transition>
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </div>
  <div class="inout">
    <transition mode="in-out">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </div>
  <div class="outin">
    <transition mode="out-in">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
});
</script>

transition 默认是同时执行2个元素的切换动画的，案例中红色的 off 按钮其实是会同时向左移动的，只是因为布局上没有脱离布局流，被 on 按钮顶住，无法移动；
mode="in-out" 可以使切换元素先执行将要显示元素的动画，再执行将要隐藏元素的动画；
mode="out-in" 可以使切换元素先执行将要隐藏元素的动画，再执行将要显示元素的动画；

8 多元素动画：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 2s;}
  v-enter-to { margin-left: 10px;}
</style>
<body>
<div id="app">
  <transition-group>
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <transition-group tag="ul">
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemspush(itemslength)">add</button>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    items: [0,1]
  }
});
</script>

transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素，要想使用多个元素的动画，必须使用 transition-group；
transition-group 默认会在 DOM 里渲染成 span 标签，可使用 tag="ul" 指定渲染成其他标签；
transition-group 必须为每一个子元素指定 key；

8 多元素的位移动画：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-move { transition: all 1s; }
</style>
<body>
<div id="app">
  <transition-group tag="ul" >
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemsreverse()">reverse</button>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    items: [0,1,2,3]
  }
});
</script>

transition-group 允许在每个元素移动时，添加 v-move 的样式，移动完成后自动清除该样式；
transition 的属性， transition-group 都有，包括 name enter leave；

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

Vue.js实现微信过渡动画左右切换效果

前言在awesomes上寻找移动端框架的时候意外发现了vux的页面切换效果,后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意,也就看了下源码,这里贴一份备用. 需要用到的技术栈:Vue+Vuex 先看看效果图过渡动画示例代码 //app.vue <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')"> <keep-alive> <router-
Vuejs第七篇之Vuejs过渡动画案例全面解析

本篇资料是小编结合官方文档整理的一套更全面细致的说明,代码更多更全. 本篇资料来于官方文档: http://cn.vuejs.org/guide/transitions.html 下面看下过渡动画相关知识: ①过渡动画的定义: 简单来说,就是当模块消失.出现时,会以什么样的形式消失和出现: 如果要使用过渡动画,则在标签里加入属性: transition="过渡动画名" 例如: <div class="box" v-if="box_1" tr
vue元素实现动画过渡效果

1 在 vue 中,使用 <transition> 标签包含着的单个子元素在使用 v-show 或 v-if 切换显示隐藏前,会先判断是否有对应的 class 样式能匹配到该子元素上: <script src="/public/javascripts/vuejs"></script> <style> red {background-color: red; width: 100px; height: 100px;} redv-leave {
Vue.2.0.5过渡效果使用技巧

概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 在这里,我们只会讲到进入.离开和列表的过渡, 你也可以看下一节的管理过渡状态. 单元素/组件的过渡 Vue 提供了 transition 的封装组件,
详解Vue中过度动画效果应用

一.实现动画过渡效果的几种方式实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name="fade"></transition> 1.v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. 2.v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效,在 transition/animation 完成之后移除. 3.v-lea
Vue中CSS动画原理的实现

下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"> <div v-if="show">hello world</div> <button @click="handleClick">按钮</button> </div> let vm = new Vue({ el: '#root', data: { show:true }, method
vue学习笔记之Vue中css动画原理简单示例

本文实例讲述了Vue中css动画原理.分享给大家供大家参考,具体如下: 当transition包裹了一个元素之后,vue会自动分析元素的css样式,构建动画流程. so,我们需要定义style. vue中的css动画,其实就是某一个时间点,给元素再增加了一个css样式体现的. v-if.v-show.动态组件都可以实现过渡效果. 如果没有给transition定义name,vue中默认是.v-enter..v-leave-to. <!DOCTYPE html> <html lang=&
前端如何实现动画过渡效果

简介动画这个概念非常宽泛,涉及各个领域,这里我们把范围缩小到前端网页应用层面上,不用讲游戏领域的Animate,一切从最简单的开始. 目前大部分网页应用都是基于框架开发的,比如Vue,React等,它们都是基于数据驱动视图的,那么让我们来对比一下,还没有这些框架的时候我们如何实现动画或者过渡效果,然后使用数据驱动又是如何实现的. 传统过渡动画动画效果对体验有着非常重要的效果,但是对于很多开发者来讲,可能是个非常薄弱的环节.在css3出现之后,很多初学者最常用的动画过渡可能就是css3的能力了
Vue 过渡（动画）transition组件案例详解

Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g
简单谈谈vue的过渡动画(推荐)

在vue中,实现过渡动画一般是下面这样: <transition name="fade"> <div></div> </transition> 用一个transition对元素或者组件进行封装. 在过渡的时候,会有 4 个(CSS)类名在 enter/leave 的过渡中切换. 1.v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. 2.v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效
解决vue的过渡动画无法正常实现问题

前记:最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实; 建议:先学习vue官方文档的进入/离开 & 列表过渡章节,那么我们来看bug; 首先上出现问题的代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .haha-leave-active { transitio
vue实现翻牌动画

本文实例为大家分享了vue实现翻牌动画的具体代码,供大家参考,具体内容如下应用场景常用于大屏订单数量展示原理利用css writing-mode: vertical-rl 使数字垂直排列利用css transform 使数字滚动实现思路根据css先让数字垂直排列,总共设置8列根据组件传递的数值,如果不满8位,递归补零补零之后,循环根据 translate(-50%, -${numberArr[index] * 10}%,查看动画 <template> <div

vue元素实现动画过渡效果

相关推荐

随机推荐