<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    Vue封裝內容展開收起過渡效果

    首先,定義collapseTransition .js,大家可以直接CV過去使用

    const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out';
    const Transition = {
        'before-enter'(el) {
            el.style.transition = elTransition;
            if (!el.dataset) el.dataset = {};
            el.dataset.oldPaddingTop = el.style.paddingTop;
            el.dataset.oldPaddingBottom = el.style.paddingBottom;
            el.style.height = 0;
            el.style.paddingTop = 0;
            el.style.paddingBottom = 0;
        },
        enter(el) {
            el.dataset.oldOverflow = el.style.overflow;
            if (el.scrollHeight !== 0) {
                el.style.height = el.scrollHeight + 'px';
                el.style.paddingTop = el.dataset.oldPaddingTop;
                el.style.paddingBottom = el.dataset.oldPaddingBottom;
            } else {
                el.style.height = '';
                el.style.paddingTop = el.dataset.oldPaddingTop;
                el.style.paddingBottom = el.dataset.oldPaddingBottom;
            }
            el.style.overflow = 'hidden';
        },
        'after-enter'(el) {
            el.style.transition = '';
            el.style.height = '';
            el.style.overflow = el.dataset.oldOverflow;
        },
        'before-leave'(el) {
            if (!el.dataset) el.dataset = {};
            el.dataset.oldPaddingTop = el.style.paddingTop;
            el.dataset.oldPaddingBottom = el.style.paddingBottom;
            el.dataset.oldOverflow = el.style.overflow;
    
            el.style.height = el.scrollHeight + 'px';
            el.style.overflow = 'hidden';
        },
        leave(el) {
            if (el.scrollHeight !== 0) {
                el.style.transition = elTransition;
                el.style.height = 0;
                el.style.paddingTop = 0;
                el.style.paddingBottom = 0;
            }
        },
        'after-leave'(el) {
            el.style.transition = '';
            el.style.height = '';
            el.style.overflow = el.dataset.oldOverflow;
            el.style.paddingTop = el.dataset.oldPaddingTop;
            el.style.paddingBottom = el.dataset.oldPaddingBottom;
        }
    };
    export default {
        name: 'collapseTransition',
        functional: true,
        render(h, {children}) {
            const data = {
                on: Transition
            };
            return h('transition', data, children);
        }
    };

    然后,在組件內引入:

    import collapseTransition from '../collapseTransition.js';

    使用方法:

    <collapseTransition> 
        <div v-show="drawStatus"> 
        </div> 
    </collapseTransition>

    說明:改變drawStatus狀態即可。

    「點點贊賞,手留余香」

    0

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » Vue封裝內容展開收起過渡效果

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区