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

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

<script setup>
import { changeWHFactory } from '../../utils'
import { defineExpose, ref, watchEffect, defineProps } from 'vue'

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>