Vue运用transition实现过渡动画


Posted in Javascript onMay 06, 2019

vue的过渡动画,主要是transition标签的使用,配合css动画实现的。官方文档css过渡

通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下来转换在x轴上位移的距离, transition包括的是位移的内。key是必须有的,用来标记位移的哪一个,这个方法有一点,用v-if时会频繁的建立销毁。name是你定义的名字必须有,和css里面的名字是保持一致的,你可以自定义名字。

使用它时有时候切换的并不是标签,而是一个组件,这时候应该使用transition-group来包括。

<template>
 <div>
 <div>
  
<span @click="show = 0">第一个</span>
   <span @click="show = 2">第二个</span>
   <span @click="show = 3">第三个</span>
  </div>
  <transition-group name="slide">
  
<div v-show="show == 0" key="0">第一个文本</div>
   <div v-show="show == 2" key="2">第二个文本</div>
   <div v-show="show == 3" key="3">第三个文本</div>
  </transition-group>
 </div>
</template>
<script>
 export default {
  data () {
  
return {
   show:0
   }
  }
 }
</script>
<style>
 .slide-enter-active{
 

transition:all .5s linear;
 }
 .slide-leave-active{
  transition:all .1s linear;
 }
 .slide-enter{
  transform: translateX(-100%);
  opacity: 0;
 }
 .slide-leave-to{
  transform: translateX(110%);
  opacity: 0;
 }
</style>

总结

以上所述是小编给大家介绍的Vue运用transition实现过渡动画 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
小程序实现五星点评效果
Nov 03 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 #Javascript
vue路由跳转传参数的方法
May 06 #Javascript
如何获取vue单文件自身源码路径
May 06 #Javascript
详解vue-cli中使用rem,vue自适应
May 06 #Javascript
用Vue编写抽象组件的方法
May 06 #Javascript
JS解惑之Object中的key是有序的么
May 06 #Javascript
微信小程序和百度的语音识别接口详解
May 06 #Javascript
You might like
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python生成二维码的实例详解
2017/10/29 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Spy++的使用方法及下载教程
2021/01/29 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
服务员岗位责任制
2014/02/11 职场文书
班级德育工作实施方案
2014/02/21 职场文书
停车场管理制度范本
2015/08/05 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python