多个元素的过渡
<style>
  .v-enter,.v-leave-to{
    opacity: 0;
  }
  .v-enter-acitve,.v-leave-active{
    opacity: opacity 1s;
  }
</style>
<div id='app'>
  <transition>
    <div v-if='show'>hello world</div>
    <div v-else>bye world</div>
  </transition>
  <button @click='handleClick'>切换</button>
</div>
<script>
var vm = new Vue({
  el:'#app',
  data:{
    show:true
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    }
  }
})
</script>
按照之前的写法方式,渐隐渐出的效果并没有出现该有的效果,那么为什么呢?
在if else两个元素切换的时候,会尽量的复用dom,正是vue,dom的复用,导致动画的效果不会出现,如果想要vue不去复用dom,之前也说过,怎么做呢,给两个div不同的key值就行了
<div v-if='show' key='hello'>hello world</div>
<div v-else key='bye'>bye world</div>
这样就可以有个明显的动画效果,,多个元素过渡动画的效果
transition还提供了一个mode属性,in-out是先显示再隐藏,out-in是先隐藏再显示
多个组件的过渡
<style>
  .v-enter, .v-leave-to {
    opacity: 0;
  }
  .v-enter-acitve, .v-leave-active {
    transition: opacity 1s;
  }
</style>
<div id='app'>
  <transition mode='out-in'>
    <child v-if='show'></child>
    <child-one v-else></child-one>
  </transition>
  <button @click='handleClick'>切换</button>
</div> <script>
Vue.component('child',{
  template:'<div>child</div>'
})
Vue.component('child-one',{
  template:'<div>child-one</div>'
})
var vm = new Vue({
  el:'#app',
  data:{
    show:true
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    }
  }
})
</script>
这个就是多个组件的过渡,采用的是上面的方式,替换子组件,那么我们换一种方式,用动态组件
<style>
  .v-enter, .v-leave-to {
    opacity: 0;
  }
  .v-enter-acitve, .v-leave-active {
    transition: opacity 1s;
  }
</style>
<div id='app'>
  <transition mode='out-in'>
    <component :is='type'></component>
  </transition>
  <button @click='handleClick'>切换</button>
</div> <script>
Vue.component('child',{
  template:'<div>child</div>'
})
Vue.component('child-one',{
  template:'<div>child-one</div>'
})
var vm = new Vue({
  el:'#app',
  data:{
    type:'child'
  },
  methods:{
    handleClick:function(){
      this.type = (this.type === 'child' ? 'child-one' : 'child')
    }
  }
})
</script>
这样也实现了多个组件的过渡效果

vue中多个元素或多个组件之间的动画效果的更多相关文章

  1. vue实现多个元素或多个组件之间动画效果

    多个元素的过渡 <style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-acitve,.v-leave-active{ opacity: ...

  2. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  3. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  4. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  5. Vue 中使用 extent 开发loading等全局 组件

    Vue 中使用 extend 开发组件 简介:再开发过程中那面会遇到自定义 loading alert 等全局组件,这里我们可以使用 vue 中的extend 来帮助我们完成 一个简单extend例子 ...

  6. Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  7. (转)Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  8. Vue(基础四)_总结五种父子组件之间的通信方式

    一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit()  (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...

  9. Vue 编程之路(一)——父子组件之间的数据传递

    最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中部分页面是数据管理页,所以有很多可以复用的表格,故引入自定义组件.在这里分享一下开 ...

随机推荐

  1. UntraEdit 语法高亮 (MSSQL)

    http://www.ultraedit.com/downloads/extras/wordfiles.html 这里有ue 支持的语言的uew文件. 需要把下载的语法文件放到: %APPDATA%\ ...

  2. gulp不压缩打包layui

    从网上下载的layui都是压缩包,如何打包在一个文件且不压缩呢?如下方法: 1.https://gitee.com/sentsin/layui下载源码(本文的为2.4.5版本) 2.安装nodejs( ...

  3. testlink数据库访问密码修改

    testlink重启后数据库连接不上将会报错 错误:1045 - Access denied for user 'my_db '@'localhost' (using password: YES) 怎 ...

  4. python练习六十五:类的使用实例

    代码: class human(): #定义基类,包括属性和方法 def __init__(self,name,eye=2,age=98,city='陕西'): #属性值有四个,分别为name,eye ...

  5. 使用 Fetch完成AJAX请求

    使用 Fetch完成AJAX请求 写在前面 无论用JavaScript发送或获取信息,我们都会用到Ajax.Ajax不需要刷新页面就能发送和获取信息,能使网页实现异步更新. 几年前,初始化Ajax一般 ...

  6. Mybatis学习笔记18 - 缓存

    两级缓存: 一级缓存:(本地缓存):sqlSession级别的缓存.一级缓存是一直开启的:SqlSession级别的一个Map 数据库同一次会话期间查询到的数据会放在本地缓存中.以后如果需要获取相同的 ...

  7. 性能测试工具LoadRunner27-LR之读取Excel数据

    为何要读取Excel数据? 很多用户喜欢用Excel来统计数据,比如学生成绩表.个人信息等.有时需要把Excel中的数据来进行参数化,数据量比较多时,一个个在LR里输入是不现实的,因此需要用LR来导入 ...

  8. [转]asp.net URL中包含中文参数造成乱码的解决方法

    本文转自:http://www.jb51.net/article/22437.htm 问题: 前段时间,在系统中做了一个类似于友情链接的功能块,一直运行良好,直到有一天加了类似于以下的链接地址:htt ...

  9. Linux平台命令挂载U盘——实现数据共享

    废话少说,一一道来,Linux中按照步骤来做就可以啦.(嵌入式平台) 1.先看看本地的mount信息 # mountrootfs on / type rootfs (rw)/dev/root on / ...

  10. git 基础教程

    git 提交 全部文件 git add .  git add xx命令可以将xx文件添加到暂存区,如果有很多改动可以通过 git add -A .来一次添加所有改变的文件.注意 -A 选项后面还有一个 ...