vue 过渡攻略教程_过渡使用攻略

添加过渡效果的方法:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.js1、单组件或子元素过渡,使用:<transition name="fade

vue 过渡攻略教程

添加过渡效果的方法:

vue 过渡攻略教程_过渡使用攻略

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

1、单组件或子元素过渡,使用<transition>:

<transition name="fade"> 
<p v-if="show">hello</p>
 </transition>

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

2、使用类名过渡:

在进入/离开的过渡中,会有 6 个 class 切换。

  1. v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

  2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

  3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

  5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

  6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

vue 过渡攻略教程_过渡使用攻略

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果你使用了 <transition name=”my-transition”>,那么 v-enter 会替换为 my-transition-enter。

3、css过渡:

<transition name="slide-fade"> 
<p v-if="show">hello</p>
 </transition>

/* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ 
.slide-fade-enter-active { 
transition: all .3s ease; 
} 
.slide-fade-leave-active { 
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;
 }

4、js钩子函数

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

 

海计划公众号
(0)
上一篇 2020/03/22 01:27
下一篇 2020/03/22 01:27

您可能感兴趣的内容