VueJS - 当更多文本插入 div 时平滑过渡

Question

我制作了这个指令，它基本上隐藏了 div 中的一些文本，当您按下显示更多按钮时，它会显示整个内容。我想让过渡慢一点，这样感觉更好。

有没有办法在指令中正确地做到这一点？那将是理想的，但我无法弄清楚。有什么想法吗？

这是我目前的代码：

import i18n from '@/services/i18n';

const breakpoints = {
    mobile: 552,
    tablet: 1024,
    desktop: 1920,
};

let threshold = width => {
    const { mobile, tablet, desktop } = breakpoints;
    if (width <= mobile) {
        return 300;
    } else if (width > mobile && width < tablet) {
        return 600;
    } else if (width > tablet && width < desktop) {
        return 800;
    } else {
        return 1000;
    }
};

function setElement(element, value, width) {
    const button = document.createElement('button');
    button.classList.add('readmore-button');
    button.innerText = i18n.t('button.show-more');

    if (value.length > threshold(width)) {
        element.innerText = `${value.slice(0, threshold(width))}...`;
        element.appendChild(button);
    } else {
        element.innerText = value;
    }

    element.expand = () => {
        element.innerText = value;
        button.removeEventListener('click', element.expand);
    };

    button.addEventListener('click', element.expand);
}

const directive = {
    bind: (el, { value }) => {
        let wWidth = window.innerWidth;
        setElement(el, value, wWidth);
    },
    update: (el, { value }) => {
        let wWidth = window.innerWidth;
        setElement(el, value, wWidth);
    },
    unbind: el => {
        const button = el.querySelector('button');
        if (!button) {
            return;
        }

        button.removeEventListener('click', el.expand);
    },
};

export default directive;