使用CSS动画JQuery Mobile可折叠元素

Question

如何使用CSS过渡制作jQuery Mobile可折叠内容的动画效果？

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

无法工作。

- Jonas

Answer 1

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

另一种选择是覆盖jQuery Mobile的默认CSS，始终为可折叠内容div使用"display: block"，然后在"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没有设置高度。这个 示例 可以实现（也请参见下面的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;
}

- rexmac

---

如何使内容向下滑动和向上滑动，而不是淡入淡出？ - Jonas

我添加了第二个例子，可以在高度上进行过渡，但是它需要预定义的高度，例如2em。它也可以使用'auto'高度，但是在我看来，向下滑动的效果并不太好。 - rexmac

Answer 2

.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
}

- AMD

---

如何使内容向下滑动和向上滑动，而不是淡入淡出？ - Jonas

Answer 3

我认为你需要创建自定义的基于CSS的过渡效果：

参考此链接

- SaurabhLP