vue实现collapse折叠板动画,可设置动画时间,动画延迟等

新建，内容如下export default { inheritAttrs: false, props: { duration: { type: [Number, Object], default: 300 }, delay: { type: [Number, Object], default: 0 }, group: Boolean, tag: { type: String, default: "span" }, origin: { type: String, default: "" }, styles: { type: Object, default: () => { return { animationFillMode: "both", animationTimingFunction: "ease-out" }; } } }, computed: { componentType() { return ? "transition-group" : "transition"; }, hooks() { return { ...this.$listeners, beforeEnter: Enter, afterEnter: el => { pStyles(el); this.$emit("after-enter", el); }, beforeLeave: Leave, leave: , afterLeave: el => { pStyles(el); this.$emit("after-leave", el); } }; } }, methods: { beforeEnter(el) { let enterDuration = : on; ionDuration = `${enterDuration}ms`; let enterDelay = ? : ; ionDelay = `${enterDelay}ms`; les(el); this.$emit("before-enter", el); }, cleanUpStyles(el) { ().forEach(key => { const styleValue = [key]; if (styleValue) { [key] = ""; }

= "0"; gTop = 0; gBottom = 0; les(el); }, enter(el) { rflow = ow; if (Height !== 0) { = Height + "px"; gTop = dingTop; gBottom = dingBottom; } else { = ""; gTop = dingTop; gBottom = dingBottom; } ow = "hidden"; }, afterEnter(el) { tion = ""; = ""; ow = rflow; }, beforeLeave(el) { if (!t) t = {}; dingTop = gTop; dingBottom = gBottom; rflow = ow; = Height + "px"; ow = "hidden"; les(el); }, leave(el) { let leaveDuration = : on; if (Height !== 0) { // for safari: add class after set height, or it will jump to zero height suddenly, weired tion = tionStyle(leaveDuration); = 0; gTop = 0; gBottom = 0; } // necessary for transition-group olutePosition(el); }, afterLeave(el) { tion = ""; = ""; ow = rflow; gTop = dingTop; gBottom = dingBottom; } }, render(h) { return h( "transition", { props: { is: entType, tag: }, on: { "before-enter": Enter, "after-enter": nter,