过渡-Vue3学习日记(二)

Vue3过渡

Vue3过渡相较于Vue2有那么些许的差别,本文只讲过渡不讲动画

基本实现

单元素/组件

<div id="fakin">
  <button @click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
  data() {
    return {
      show: true
    }
  }
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

列表过渡

一个文章列表

<transition-group tag="div" name="list">
  <div
    class="content-item"
    v-for="(item, index) in list"
    :key="item.id"
  >
    <div class="item-left">
      <h4 class="item-title">{{ item.title }}</h4>
      <div class="item-info">
        <div class="item-info-author">{{ item.src }}</div>
        <div class="item-info-time">{{ item.time }}</div>
        <div class="item-close" @click="removeItem(index)">X</div>
      </div>
    </div>
    <div class="item-right">
      <img :src="item.pic" alt="" />
    </div>
  </div>
</transition-group>
const removeItem = (index: number): void => {
      list.splice(index, 1)
}
.list-leave-active {
  transition: all .5s ease;
}

.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

以上是vue3中过渡的单元素/组件和列表过渡的基本实现和用法至于状态过渡需要结合第三方动画库使用,可以参考官方文档:状态过渡

过渡类名

上面的例子可以看到transition中有name属性,然后css中会有关于name属性的组合类名,这就是vue给我们带来的非常方便的一点。

  • v-enter-from:定义进入过渡的开始状态。

  • v-enter-active:定义进入过渡生效时的状态。

  • v-enter-to:定义进入过渡的结束状态 (与此同时 v-enter-from 被移除),在过渡/动画完成之后移除。

  • v-leave-from:定义离开过渡的开始状态。。

  • v-leave-active:定义离开过渡生效时的状态。

  • v-leave-to:离开过渡的结束状态。 (与此同时 v-leave-from 被删除),在过渡/动画完成之后移除。

一共六个类名,注意这里和Vue2是有却别的v-enter-fromv-leave-fromVue2中没有-from

aaa

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

自定义过渡 class 类名

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

这个一看就明白比较容易看懂,需要留意一点就是优先级高于普通的类名

显性的过渡持续时间

<transition :duration="1000">...</transition>

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

钩子函数

可以在transition或者transition-group中使用attribute的方式声明钩子函数

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
  // --------
  // 进入时
  // --------
 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) {
    // 离开过渡被打断时
  }

这些钩子函数可以结合 CSS transitions/animations 使用,也可以单独使用。

当只用 JavaScript 过渡的时候,在 enter 和 leave 钩中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。添加 :css=”false”,也会让 Vue 会跳过 CSS 的检测,除了性能略高之外,这可以避免过渡过程中 CSS 规则的影响。

列表过渡

如果需要对一组列表进行过渡,例如v-for中那么可以使用 <transition-group> 组件,可以看上面的例子
* 默认情况下,它不会渲染一个元素的包裹器,但是你可以指定一个元素并以 tag attribute 进行渲染。
* 过渡模式不可用,因为我们不再相互切换特有的元素。
* 内部元素总是需要提供唯一的 key attribute 值。
* CSS 过渡的类将会应用在内部的元素中,而不是这个组/容器本身

列表的移动过渡

<transition-group>组件还有一个特殊之处。可以改变定位v-move class,它会在元素的改变定位的过程中应用。像之前的类名一样,可以通过 name attribute 来自定义前缀,也可以通过 move-class attribute 手动设置。


<transition-group name="flip-list" tag="ul"></transition-group> <transition-group name="flip-list" tag="ul" move-class="move"></transition-group>

.flip-list-move { transition: transform 0.8s ease; } .move{ transition: transform 0.8s ease; }

过渡中还有一些内容没有说到,后期进行补充