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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
JavaScript原生数组函数实例汇总
Oct 14 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
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
Laravel实现表单提交
2017/05/07 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
jquery创建div 实现代码
2009/04/27 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
自己使用总结Python程序代码片段
2015/06/02 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
python实现飞机大战游戏
2020/10/26 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python是怎么被发明的
2020/06/15 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
领班岗位职责范文
2014/02/06 职场文书
超市中秋节活动方案
2014/02/12 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
担保书怎么写
2014/04/01 职场文书
公司委托书范本
2014/04/04 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
Mysql排序的特性详情
2021/11/01 MySQL
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python