回首Vue3之组件篇（二）

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

这篇文章咱们来说一下内置组件transition和transition-group的使用方法，在使用它们的时候咱们又该注意什么呢，下面让咱们一探究竟把。

transition

transition是 Vue 提供的单元素/组件的过渡封装组件。若是有条件渲染 "v-if"、条件展现 "v-show"、动态组件和组件根节点任何一种状况，咱们可使用transition给任何元素和组件添加进入/离开过渡。

过渡class

过渡class共6个，其中 进入 enter 3个，离开 leave 3个，以下图所示：

1. from表示进入或离开的开始状态。

2. active表示进入或离开的过渡状态。在整个过渡的阶段中应用，在元素被插入以前生效，在过渡/动画完成以后移除。这个类能够被用来定义过渡的过程时间，延迟和曲线函数。

3. to表示进入或离开的结束状态。

值得咱们注意的是：

• 图中的v表明transition的name属性的值，例如name="slide-fade",对应 v-enter-from 要变成 slide-fade-enter-from

• 在Vue3中，enter-class 已经被重命名为 enter-from-class，leave-class 已经被重命名为 leave-from-class，这是与Vue2不一样的地方。

如何使用

CSS过渡 transition

假设咱们这样使用transition，以下：

<transition name="fade">
    <p v-show="show">world</p>
</transition>
复制代码

那么，咱们须要对应的css样式，以下：

//进入和离开的过渡状态
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

//进入的开始 离开的结束
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
复制代码

类比原生hover效果，enter至关于鼠标移入的效果，leave至关于鼠标移出的效果。

CSS动画

若是咱们把上述的过渡改为动画该怎么作呢，以下：

//这里是加入 进入 和 离开 的动画
.fade-enter-active {
    animation: fade-in 0.5s;
}
.fade-leave-active {
    animation: bounce-in 0.5s reverse;
}

//这里就是咱们平时写的 keyframes
@keyframes fade-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}
复制代码

自定义过渡class类名

当咱们结合第三方动画库的时候，咱们能够自定义过渡class类名，它们的优先级高于普通的类名，自定义类名的属性以下：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

使用以下：

<transition name="bounce" enter-active-class="animate__animated animate__tada" leave-active-class="animate__animated animate__bounceOutRight">
    <p v-show="show">world</p>
</transition>
复制代码

显示的是自定义类名的效果，高于name属性的效果。

JavaScript 钩子

能够在 attribute 中声明 JavaScript 钩子，这样咱们能够在对应的钩子里面操做el，钩子使用以下：

<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled" //仅 v-show :css="false" >
  <!-- ... -->
</transition>
复制代码

咱们须要给它们对应的函数，以下：

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

  //***** 离开时 *****
  beforeLeave(el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave(el, done) {
    // ...
    done()
  },
  afterLeave(el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled(el) {
    // ...
  }
}
复制代码

注意事项

1. CSS过渡和动画能够同时使用，你能够进入时用过渡，离开时用动画，根据本身的需求，选择合适的配合方式。

2. transition组件要合理的使用，有时原生的可能会更简单。

transition-group

transition-group是 Vue 提供的多元素/组件的过渡封装组件。默认状况下，它不会渲染一个 DOM 元素包裹器，可是能够经过 tag attribute 来定义。值得咱们注意的是：每一个 <transition-group> 的子节点必须有独立的 key，动画才能正常工做。

如何使用

当子节点被更新的时候，会触发动画。

使用

<transition-group tag="ul" name="fade">
    <li v-for="item in count" :key="item">
          {{ item }}
    </li>
</transition-group>
复制代码

当count增长的时候，li也会增长，会触发动画。

JavaScript 钩子

同transition的钩子同样使用。

注意事项

1. 必定要定义tag，若是未定义，则不会触发动画。

2. move-class - 覆盖移动过渡期间应用的 CSS 类。

总结

1. 根据本身的需求，合理的使用transitio和transition-group。

2. 使用它们的时候，要考虑到进入和离开的效果。固然，你能够只定义进入或离开的效果。