在官网中的详细描述:点击打开链接

transition组件出现过度/动画效果的原因

当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:

  • 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。
  • 如果过渡组件提供了 JavaScript钩子函数,这些钩子函数将在恰当的时机被调用。
  • 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作(插入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的 nextTick 概念不同)

transition组件在什么情况下可以生成动画效果

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡动画效果

  • 条件渲染 (使用 v-if) ,可以使用key代替v-if
  • 条件展示 (使用 v-show)
  • 动态组件
 <component v-bind:is="currentTabComponent"></component>
  • 组件根节点
    transition/transition-group作为根组件,形成可复用动态组件

transition组件生成动画效果的方式

Vue 在插入、更新或者移除 DOM 时,提供了以下不同方式的应用过渡效果:

  • 在 CSS 过渡和动画中自动应用 class
  • 可以配合使用第三方 CSS 动画库,如 Animate.css
  • 在过渡钩子函数中使用JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 动画库,如 Velocity.js

1.CSS 过渡

常用的过渡都是使用 CSS 过渡,也就是 组件和css3属性transition连用

 例子一:淡入淡出
 <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
  
export default  {
    data() {
        return{
            show: true
        }
  } 
  
// 样式如此设置,只需要控制show是false还是true,即可有淡入淡出的效果

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

在这里插入图片描述
在线调试

 案例二: 快速淡入 慢慢淡出
<transition name="slide-fade"> // 不设置name,默认为v-
    <p v-if="show">hello</p>
</transition>
  
export default  {
    data() {
        return{
            show: true
        }
  } 
  
 // 样式如此设置,只需要控制show是false还是true,
 // 即可有 快速淡入 慢慢淡出 的效果
 
 /* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active { // 进入0.3秒
  transition: all .3s ease;
}
.slide-fade-leave-active { // 淡出0.8秒
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to // 进入开始是透明,淡出最后是透明
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

2.过渡可以和其他第三方 CSS 动画库连用

 案例一: Vue 的过渡系统可以和其他第三方 CSS 动画库,
 如 Animate.css 结合使用
 
<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
</transition>
export default  {
    data() {
        return{
            show: true
        }
      }  
 //不需要设置样式,只需要控制show是false还是true,即可有动画效果

3.CSS 动画

  • CSS 动画是transition组件和css3属性animation连用,用法和 CSS 过渡相同
  • 区别是:在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除。
示例一:(省略了兼容性前缀)
  <transition name="bounce">
    <p v-if="show">使用animation做动画效果</p>
  </transition>
  export default  {
    data() {
        return{
            show: true
        }
      } 
      
// 样式如此设置,只需要控制show是false还是true,即可有动画的效果

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

4.还可以同时使用过渡和动画

用法同上,省略…

5.transition组件和JavaScript 钩子连用

  • 当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。
  • 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
例子一:进入离开动画
 <transition 
 @before-enter="beforeEnter" 
 @enter="enter" 
 @after-enter="afterEnter"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 >
    <div id="ball" v-show="show">hello</div>
</transition>

new Vue({
			el: '#app',
			data: {
				 show: true
				},
	methods: {
            // el 即操作的元素对象
        beforeEnter(el) {
                el.style.transform='translate(80px,80px)';
            },
        enter(el,done){
                //必须加下面一行,否则不会出现应有的效果
                el.offsetWidth;//这里可以理解成强制浏览器刷新,也可以写el.offsetHeight
                el.style.transition='all 1.5s ease';
                el.style.transform='translate(0,0)';
                done()
            },
        afterEnter(el){
                console.log('afterEnter');
                // this.flag=false;//隐藏小球
            },
        beforeLeave: function (el) {
                el.style.transform='translate(0,0)';
             },
        // 当与 CSS 结合使用时
        // 回调函数 done 是可选的
        leave: function (el, done) {
            el.offsetWidth;//这里可以理解成强制浏览器刷新,也可以写el.offsetHeight
            el.style.transition='all 3s ease';
            el.style.transform='translate(80px,80px)';
           // 这里直接调用done的话由于会立即删除元素导致动画不执行
          // done();
		  //方法1:
          // 不调用done可以进行动画,但是元素依旧存在,并且afterLeave函数钩子不执行
		  //方法2:
          // setTimeout可以解决这个问题,让done不立即执行,过几秒后再执行
          setTimeout(done,3000); //时间根据自己设定的动画时间确定
           
        },
        afterLeave: function (el) {
            console.log('afterLeave');
        
        },
  }
			})

注意:

  • 在leave函数钩子中 ,直接调用done函数,会立即删除元素导致动画不执行
  • 在线调试
例子二:和JavaScript 动画库Velocity一起使用
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
</transition>

new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})

6.组件间切换的动态效果实现

组件的过渡 - 不需要使用 key attribute。使用动态组件,进行动态切换:

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})


.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}

在线调试

7.元素间切换的动态效果实现

例子1:
<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>


例子2:为相同元素绑定key,否则不会有动画效果
<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

注意:当有相同标签名的元素切换时(比如两个div元素),必须通过 key attribute 设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容(也就是不会有动画效果)。

// 设置key代替v-if/v-else

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

  • 7.3两种过渡模式
    多个元素间的过度动画(一个元素离开,一个元素进入),是同时生效的。这种情形不能满足所有要求,所以 Vue 提供了过渡模式。
    in-out:新元素先进行过渡,完成之后当前元素过渡离开。
    out-in:当前元素先进行过渡,完成之后新元素过渡进入
<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>

8.可复用过渡组件

过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件,你需要做的就是将 或者 作为根组件,然后将任何子组件放置在其中就可以了。

在线调试案例
使用 template 的简单例子:

Vue.component('my-special-transition', {
  template: '\
    <transition\
      name="very-special-transition"\
      mode="out-in"\
      v-on:before-enter="beforeEnter"\
      v-on:after-enter="afterEnter"\
    >\
      <slot></slot>\
    </transition>\
  ',
  methods: {
    beforeEnter: function (el) {
      // ...
    },
    afterEnter: function (el) {
      // ...
    }
  }
})

函数式组件更适合完成这个任务:

Vue.component('my-special-transition', {
  functional: true,
  render: function (createElement, context) {
    var data = {
      props: {
        name: 'very-special-transition',
        mode: 'out-in'
      },
      on: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    }
    return createElement('transition', data, context.children)
  }
})
Logo

前往低代码交流专区

更多推荐