vue 折叠效果动画
vue 中应用css动画,详见文档:https://cn.vuejs.org/v2/guide/transitions.html,此处只列出css设置,方便后来者使用。.collapse-leave, .collapse-enter-active {max-height: 100000rem; // 由于折叠面板内容一般不知道高度,所以用max-height, 而不是height...
·
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;
}
更多推荐
已为社区贡献7条内容
所有评论(0)