首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue元素实现动画过渡效果

Posted in Javascript onJuly 01, 2017

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>

vue元素实现动画过渡效果

  1. v-leave 当前元素准备从显示转变成隐藏，在动画开始前添加到元素上，动画一旦开始会立即删除；
  2. v-leave-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
  3. 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。

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

vue元素实现动画过渡效果

事例中，动画同时指定了 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>

vue元素实现动画过渡效果

  1. 一旦使用 js 事件，原 css 动画过渡效果就会无效，官方推荐在 <div class="red" v-show="show"></div> 上设置 v-bind:css="false" 可令 vue 内部机制免去监测 css 动画事件回调，提高性能。
  2. 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>

vue元素实现动画过渡效果

  1. appear 属性表示开启初始化动画，appear-class 属性指定初始化前的样式，appear-active-class 属性指定初始化动画过程的样式；
  2. transition 动画无法在初始化动画中起效，而 animation 动画则可以；
  3. 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>

vue元素实现动画过渡效果

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>

vue元素实现动画过渡效果

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

vue元素实现动画过渡效果

  1. transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素，要想使用多个元素的动画，必须使用 transition-group；
  2. transition-group 默认会在 DOM 里渲染成 span 标签，可使用 tag="ul" 指定渲染成其他标签；
  3. 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>

vue元素实现动画过渡效果

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

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

vue元素实现动画过渡效果

- Author -

rayman_v

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 #Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 #Javascript
详解vue中computed 和 watch的异同
Jun 30 #Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 #Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 #Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 #Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 #Javascript
表扬信(62) 感言(394) 广播稿(323) 教学反思(909) 辞职信(98) 检讨书(456) 方案(1080) 证明书(326) 邀请函(127) 事迹材料(636)
You might like
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
JS效率个人经验谈（8-15更新），加入range技巧
2007/01/09 Javascript
深入认识JavaScript中的函数
2007/01/22 Javascript
JS 动态加载脚本的4种方法
2009/05/05 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
Python 多线程的实例详解
2017/09/07 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python的几种主动结束程序方式
2019/11/22 Python
pytorch实现线性拟合方式
2020/01/15 Python
python新手学习使用库
2020/06/11 Python
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
环境工程毕业生自荐信
2013/11/17 职场文书
烹调加工管理制度
2014/02/04 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
结对共建工作方案
2014/06/02 职场文书
服务标语大全
2014/06/18 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
实习协议书
2015/01/27 职场文书
付款证明模板
2015/06/19 职场文书
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS