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>

Props

Events

动画类型