UFUse（1.6.2）

Appearance

On this page

FadeTransition ​

FadeTransition 提供开箱使用的渐变动画

使用 ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import FadeTransition from 'ufuse/src/components/FadeTransition/index.vue'

const flag = ref(false)
</script>

<template>
  <div class="demo">
    <div class="w-32 h-32 shadow-lg" @click="flag = !flag">
      <FadeTransition>
        <div v-if="flag" class="w-32 h-32 bg-white absolute" />
        <div v-else class="w-32 h-32 bg-black absolute" />
      </FadeTransition>
    </div>
  </div>
</template>

预览 ​

CSS 变量 ​

变量名说明缺省值
--ufuse-transition-duration过渡持续时长300ms
--ufuse-transition-timing-function过渡曲线

原 Transition 属性 ​

如果想透传给 Transition 的属性，可以直接写在 FadeTransition 上，例如：

TODO: 解决这里的 TypeScript 类型提示 🤔

vue
<template>
  <FadeTransition mode="out-in" />
</template>

贡献者 ​

xieyuhang