css - 使用 css 动画 jquery 移动可折叠

Question

如何使用 css 过渡使 jquery 移动可折叠内容与动画一起出现？

.ui-collapsible {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

不工作。

Answer 1

jQuery Mobile 的可折叠元素通过在可折叠内容的 div 上切换 display: none 来显示和隐藏。据我所知，当 display 属性更改时，所有主流浏览器都会禁用 CSS 转换。

另一种方法是覆盖 jQuery Mobile 的默认 CSS，始终使用 display: block 作为可折叠内容 div，然后在 height 或 上进行转换opacity 属性(取决于内容是否需要从布局中“移除”)。

我创建了这个 jsFiddle , 以使用 opacity 属性演示过渡。这实际上只是使用以下 CSS 规则的问题:

.ui-collapsible-content {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    opacity: 1;
}
.ui-collapsible-content-collapsed {
    display: block;
    opacity: 0
}

使用 height 属性的过渡有点棘手，因为内容 div 没有设置高度。这fiddle可以解决问题(另请参阅下面的 CSS)，但它需要在内容 div 上设置高度。您可以将高度更改为 auto，但我认为这样向下滑动效果看起来不太正确。也许其他人知道更好的方法。

.ui-collapsible-content {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    height: 2em; /* or auto */
    overflow: hidden;
}
.ui-collapsible-content-collapsed {
    display: block;
    height: 0;
    padding: 0 16px;
}