4dkankan-components/packages/components/basic/size-animation/index.vue

<template>
    <div ref="contentRef" class="ui-size-animation" :class="{ ready, show: max !== 0, [animationStyle]: animationStyle }" :style="origin && { 'max-height': max + 'px' }">
        <slot />
    </div>
</template>

<script lang="ts" setup>
import { defineExpose, defineProps, ref, watchEffect } from 'vue'
import { changeWHFactory } from '@kankan/utils'

defineOptions({
    name: 'UISizeAnimation',
})

const props = defineProps({
    attr: {
        type: String,
        default: 'height',
    },
    animationStyle: {
        type: String,
        default: 'height',
    },
})

const [contentRef, changeShow, max, origin, show, ready, refer] = changeWHFactory(false, props.attr)

const animation = ref(false)

watchEffect(() => {
    const dom = contentRef.value
    if (dom) {
        const startHandler = () => (animation.value = true)
        const endHandler = () => (animation.value = false)

        dom.addEventListener('transitionstart', startHandler)
        dom.addEventListener('transitionend', endHandler)
        return () => {
            dom.removeEventListener('transitionstart', startHandler)
            dom.removeEventListener('transitionend', endHandler)
        }
    }
})

defineExpose({
    changeShow: (setShow, ...args) => {
        if (show !== setShow) {
            animation.value = true
        }
        return changeShow(setShow, ...args)
    },
    show,
    animation,
    ready,
    refer,
})
</script>
<!-- <script>
export default { name: 'UiSizeAnimation' }
</script> -->