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 URL锚点取值方法
Feb 25 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
jsTree使用记录实例
Dec 01 Javascript
js实现表格筛选功能
Jan 18 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
ant design 日期格式化的实现
Oct 27 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
获得Google PR值的PHP代码
2007/01/28 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
js实现详情页放大镜效果
2020/10/28 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python mock测试的示例
2020/10/19 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
JPA面试常见问题
2016/11/14 面试题
外贸英语毕业生自荐信
2013/11/14 职场文书
初中音乐教学反思
2014/01/12 职场文书
捐款倡议书范文
2014/02/02 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL