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

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

动画过程中类名的变化

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

总结

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

赞 (0)

相关推荐

  • Vue.js实现微信过渡动画左右切换效果

    Vue.js实现微信过渡动画左右切换效果

    前言 在awesomes上寻找移动端框架的时候意外发现了vux的页面切换效果,后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意,也就看了下源码,这里贴一份备用. 需要用到的技术栈:Vue+Vuex 先看看效果图 过渡动画 示例代码 //app.vue <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')"> <keep-alive> <router-

  • Vue动画事件详解及过渡动画实例

    为了应用过渡效果,需要在目标元素上使用 transition 特性: <div v-if="show" transition="my-transition"></div> transition 特性可以与下面资源一起用: v-if v-show v-for (只在插入和删除时触发,使用 vue-animated-list 插件) 动态组件 在组件的根节点上,并且被 Vue 实例 DOM 方法(如 vm.$appendTo(el))触发. 当插

  • Vue Transition实现类原生组件跳转过渡动画的示例

    Vue Transition实现类原生组件跳转过渡动画的示例

    最近学习了Vue Transition的用法,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 官方文档:https://cn.vuejs.org/v2/guide/transitions.html 演示地址:http://www.coderlife.com (请在移动端查看,PC端查看请打开移动端调试模式) 前言 看了挺多Vue的UI框架都不带过渡动画,今天心血来潮,就把自己平时用的动效抽离出来.可直接通过脚手架init模版配合其他UI框架使用,不需要另外进行配置. 原理 模版中

  • vue-router之实现导航切换过渡动画效果

    过渡动效 提供了transition的封装组件,添加过渡动画,通过添加或删除css类名来实现. 过渡的css类名: v-enter 进入过渡的开始状态 v-enter-active 进入活动状态 v-enter-to 进入的结束状态 v-leave 离开过渡的开始状态 v-leave-active 离开活动状态 v-leave-to 离开结束状态 过渡模式: in-out 先进后出 out-in 先出后进 用法: 做一个淡隐淡出效果 把想要运动的元素放到<transition></tra

  • 使用vue-router切换页面时实现设置过渡动画

    背景 今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来. 实现难点 如何判断切换路由时是前进还是后退 每次切换时向左向右切换动画如何实现 解决方案 我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. router/index.js import Vu

  • Vue入门之animate过渡动画效果

    简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • Vue运用transition实现过渡动画

    vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下来转换在x轴上位移的距离, transition包括的是位移的内.key是必须有的,用来标记位移的哪一个,这个方法有一点,用v-if时会频繁的建立销毁.name是你定义的名字必须有,和css里面的名字是保持一致的,你可以自定义名字. 使用它时有时候切换的并不是标签,而是一个组件,这时候应该使用tra

  • vue 组件中使用 transition 和 transition-group实现过渡动画

    前言 记一次vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版... template模板结构 // 单个元素 <transition name="自定义名字"> <p v-if="show">hello</p> </transition> // 列表元素: 注意group的直接子元素是v-f

  • Vue中的基础过渡动画及实现原理解析

    前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画.keyframes动画以及实现的原理 过渡动画实现的原理 1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的HTML标签之外包裹一层  <transition>标签

  • 解决vue的过渡动画无法正常实现问题

    前记:最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实; 建议:先学习vue官方文档的进入/离开 & 列表过渡章节,那么我们来看bug; 首先上出现问题的代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .haha-leave-active { transitio

  • 简单谈谈vue的过渡动画(推荐)

    简单谈谈vue的过渡动画(推荐)

    在vue中,实现过渡动画一般是下面这样: <transition name="fade"> <div></div> </transition> 用一个transition对元素或者组件进行封装. 在过渡的时候,会有 4 个(CSS)类名在 enter/leave 的过渡中切换. 1.v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. 2.v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效

随机推荐