vue 中应用css动画,详见文档:https://cn.vuejs.org/v2/guide/transitions.html,此处只列出css设置,方便后来者使用。

.collapse-leave, .collapse-enter-active {

    max-height: 100000rem; // 由于折叠面板内容一般不知道高度,所以用max-height, 而不是height

    transition: all 0.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);  // 注意这里的打开和折叠的动画时间是不同的

}



.collapse-enter,.collapse-leave-active {

    transition: all 0.1s cubic-bezier(1.0, 0.5, 0.8, 1.0);

     max-height: 0;

}

 

Logo

前往低代码交流专区

更多推荐