300
📦️Basic useageWhen the digital value of the package changes, the digital size will transition automatically
A magical component, let the number also have transitional changes!
import { UTransit } from 'ungeui';
Note that Number()
will be used inside the component to convert child elements, so the direct child elements of the component must be numbers⚠️
300📦️Basic useageWhen the digital value of the package changes, the digital size will transition automatically<template>
<div>
<u-transit>
{{number}}
</u-transit>
</div>
</template>
<script setup>
import { UTransit } from 'ungeui'
import { ref } from 'vue'
let number = ref(300)
setInterval(() => {
number.value = number.value + 66
},1000)
</script>
300⏱Basic useageSet the transition time to 2 seconds, the default is 0.5s<template>
<div>
<u-space>
<u-input v-model:value="number" style="width:200px"></u-input>
<u-tag>
<u-transit :duration="1000">
{{number}}
</u-transit>
</u-tag>
</u-space>
</div>
</template>
<script setup>
import { UTransit, UInput, UTag, USpace } from 'ungeui'
import { ref } from 'vue'
let number = ref(300)
</script>
Property | Description | Type | Default |
---|---|---|---|
duration | Duration of transition, the unit is ms | number | 500 |