vue中组件的过渡动画及实现代码


Posted in Javascript onNovember 21, 2018

1.  和多个元素的过渡一样,用组件来替换transition中包裹的标签

<style>
 .fade-enter,
 .fade-leave-to {
  opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 2s
 }
 </style>
</head>

<body>
 <div id="demo">
 <button @click="show = !show">click me</button>
 <transition name="fade" mode="in-out">
  <child-one v-if="show"></child-one>
  <child-two v-else></child-two>
 </transition>
 </div>
 <script>
 Vue.component('child-one', {
  template: `<div>child-one</div>`
 })
 Vue.component('child-two', {
  template: `<div>child-two</div>`
 })
 new Vue({
  el: '#demo',
  data: {
  show: true
  },
 })
 </script>

2.  动态组件:component组件 :is 属性,来实现组件的过渡效果 

<style>
 .fade-enter,
 .fade-leave-to {
  opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 2s
 }
 </style>
</head>

<body>
 <div id="demo">
 <button @click="handleClick">click me</button>
 <transition name="fade" mode="in-out">
  <component :is="type"></component>
 </transition>
 </div>
 <script>
 Vue.component('child-one', {
  template: `<div>child-one</div>`
 })
 Vue.component('child-two', {
  template: `<div>child-two</div>`
 })
 new Vue({
  el: '#demo',
  data: {
  type: 'child-one'
  },
  methods:{
  handleClick () {
   this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
  }
  }
 })
 </script>

PS:下面看下Vue过渡动画实现

实现一个点击切换元素的隐藏和显示状态!

<div id="app">
  <transition>
    <p v-if="show">Hello World</p>
  </transition>
  <button @click="toggle">切换</button>
</div>

需要把加入动画的元素放在transition组件内,定义一个按钮的切换方法

<script>
  var app=new Vue({
    el:"#app",
    data:{
      show:true
    },
    methods:{
      toggle:function(){
        this.show=!this.show;
      }
    }

  })
</script>

给不同状态下添加相应的样式

.v-enter,.v-leave-to{
  opacity:0;
}
.v-enter-active,.v-leave-to{
  color:#00BFFF;
  transition: opacity 3s;
}

可以给transition添加一个name,如果name为"fade",则class前缀为指定的name

动画过程中类名的变化

vue中组件的过渡动画及实现代码

我们可以自定义类名,在元素属性中添加进入状态 enter-active-class,和离开状态leave-active-class

总结

以上所述是小编给大家介绍的vue中组件的过渡动画及实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
prototype 学习笔记整理
Jul 17 Javascript
JavaScript 的继承
Oct 01 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
Augularjs-起步详解
Jul 08 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
微信小程序canvas动态时钟
Oct 22 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 #Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 #Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 #Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 #Javascript
详解nuxt路由鉴权(express模板)
Nov 21 #Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 #Javascript
Angular刷新当前页面的实现方法
Nov 21 #Javascript
You might like
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
python杀死一个线程的方法
2015/09/06 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
违反交通法规检讨书
2014/09/10 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android