3

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

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

不工作。

4

3 回答 3

3

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

另一种方法是覆盖 jQuery Mobile 的默认 CSS 以始终display: block用于可折叠内容 div，然后在heightoropacity属性上进行转换（取决于是否需要从布局中“删除”内容）。

我创建了这个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
}

由于内容 div 没有设置高度，因此使用该height属性进行转换有点棘手。这个小提琴可以解决问题（另见下面的 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;
}
于 2012-07-14T10:25:15.557 回答
1 
.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
}
于 2012-07-14T11:57:22.107 回答
0

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

参考这个

于 2012-07-14T10:15:19.940 回答