vue实现手风琴下拉菜单带动画效果

最新推荐文章于 2024-05-14 15:31:14 发布

weixin_45573681

最新推荐文章于 2024-05-14 15:31:14 发布

阅读量851

点赞数

文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/fly_666/article/details/123252875

版权

1、添加collapse-transition.js

const elTransition = '0.3s height ease-in-out';
const Transition = {
    beforeEnter(el) {
        el.style.transition = elTransition;
        if (!el.dataset) el.dataset = {};
        el.style.height = 0;
    },
    enter(el) {
        if (el.scrollHeight !== 0) {
            el.style.height = `${el.scrollHeight}px`;
        } else {
            el.style.height = '';
        }
        el.style.overflow = 'hidden';
    },
    afterEnter(el) {
        el.style.transition = '';
        el.style.height = '';
    },
    beforeLeave(el) {
        if (!el.dataset) el.dataset = {};
        el.style.display = 'block';
        el.style.height = `${el.scrollHeight}px`;
        el.style.overflow = 'hidden';
    },
    leave(el) {
        if (el.scrollHeight !== 0) {
            el.style.transition = elTransition;
            el.style.height = 0;
        }
    },
    afterLeave(el) {
        el.style.transition = '';
        el.style.height = '';
    },
};
export default {
    name: 'CollapseTransition',
    functional: true,
    render(h, { children }) {
        const data = {
            on: Transition,
        };
        return h('transition', data, children);
    },
};