Transition 动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

代码演示

基础用法

将元素包裹在 transition 组件内,在元素展示/隐藏时,会有相应的过渡动画。

<z-transition v-model:show="show">内容</z-transition>

动画类型

transition 组件内置了多种动画,可以通过name字段指定动画类型。

<z-cell-group>
  <z-cell is-link title="Fade" @click="animate('fade')" />
  <z-cell is-link title="Slide Up" @click="animate('slide-up')" />
  <z-cell is-link title="Slide Down" @click="animate('slide-down')" />
  <z-cell is-link title="Slide Left" @click="animate('slide-left')" />
  <z-cell is-link title="Slide Right" @click="animate('slide-right')" />
</z-cell-group>
<z-transition v-model:show="show" :name="transitionName">
  <view class="demo-animate-content">
    <view class="demo-animate-block" />
  </view>
</z-transition>
<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
const transitionName = ref('')

const animate = (newName: string) => {
  show.value = true
  transitionName.value = newName

  setTimeout(() => {
    show.value = false
  }, 500)
}
</script>
<style lang="scss" scoped>
.demo-transition {
  .demo-animate-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 500rpx;

    .demo-animate-block {
      width: 200rpx;
      height: 200rpx;
      background-color: var(--z-blue);
      border-radius: 16rpx;
    }
  }
}
</style>

API

Props

参数说明类型默认值
name动画类型stringfade
show是否展示组件booleantrue
duration动画时长,单位为毫秒number | object300
custom-style自定义样式object-

Events

事件名说明参数
before-enter进入前触发-
enter进入中触发-
after-enter进入后触发-
before-leave离开前触发-
leave离开中触发-
after-leave离开后触发-

动画类型

名称说明
fade淡入
fade-up上滑淡入
fade-down下滑淡入
fade-left左滑淡入
fade-right右滑淡入
slide-up上滑进入
slide-down下滑进入
slide-left左滑进入
slide-right右滑进入