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 相关文章推荐
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
Js apply方法详解
Feb 16 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
js实现select下拉框选择
Jan 11 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
dedecms模板标签代码官方参考
2007/03/17 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
js中哈希表的几种用法总结
2014/01/28 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
Python下载指定页面上图片的方法
2016/05/12 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Windows和Linux动态库应用异同
2016/07/28 面试题
高中生的学习总结自我鉴定
2013/10/26 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
学生励志演讲稿
2014/01/06 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
五年级学生评语大全
2014/12/26 职场文书
单位计划生育责任书
2015/05/09 职场文书
交通安全教育主题班会
2015/08/12 职场文书
追悼会答谢词范文
2015/09/29 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL