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

通过在可折叠内容的div上切换display: none来显示和隐藏jQuery Mobile的可折叠元素。据我所知，当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没有设置高度。这个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;
}

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
}

Answer 3

我认为你必须创建自定义基于CSS的过渡： -

Refer This

动画jquery移动可折叠与CSS

3 个答案: