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 相关文章推荐
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
php生成随机数的三种方法
2014/09/10 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
详解Angular 自定义结构指令
2017/06/21 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
经贸日语毕业生自荐信
2013/11/03 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
2019教师的学习计划
2019/06/25 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python