vue实现自适应折叠动画

最新推荐文章于 2024-07-11 11:41:59 发布

guorui_cara

最新推荐文章于 2024-07-11 11:41:59 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue 折叠效果动画

本文链接：https://blog.csdn.net/guorui_cara/article/details/103733753

版权

本文介绍了如何在Vue中创建自适应的折叠动画效果。通过使用函数组件，只需几步即可轻松实现。在其他组件或页面中，可以直接引用该组件，实现简单快捷的折叠动画效果。

摘要由CSDN通过智能技术生成

简单明了上代码：

使用的是函数组件（新建js,直接当做组件引用就好了）

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