平板电脑和智能手机上展开和折叠的慢动画答案

【问题标题】：Slow animation for Expand and Collapse on tablet and smart phones平板电脑和智能手机上展开和折叠的慢动画
【发布时间】：2013-10-14 15:42:38
【问题描述】：

我在我的 iOS 应用程序中使用 UIWebView，在 webView 中我使用 Bootstrap UI 来设计展开和折叠动画。我使用的 JavaScript 框架是 AngularJS。我面临的问题是展开和折叠的缓慢动画。如果您使用设备（iPhone 或 iPad）按照以下步骤操作，您可以轻松重现此问题

1- 在 iPad 上通过 Safari 打开 Bootstrap 网站 (http://angular-ui.github.io/bootstrap/)。

2- 在折叠段落下，点击示例按钮，该按钮可折叠和展开简单内容。请注意扩展内容所需的时间。

您也可以为 JQuery 测试此问题，步骤如下：

1- 通过 Safari 使用 iPad 打开 JQuery Mobile 网站 (http://view.jquerymobile.com/1.3.1/dist/demos/widgets/collapsibles/)。 2-点击示例按钮，它会展开和折叠一个简单的按钮。请注意扩展内容所需的时间。

根据我们的用户体验反馈，展开和折叠所需的时间确实很慢。我研究了这个问题并调试了 AngularJS 框架，看看这个问题是从哪里来的。似乎有一个名为 EventHandler 的方法会导致此问题。

有人知道设计在设备上快速运行的展开和折叠还有哪些其他选项？

【问题讨论】：

我会尝试从 dom 中删除背景中的一些元素，然后在您关闭动画时重新插入您删除的元素。这可能会使您的动画平滑一些。
即使内容为空也存在问题，这就是我放置Bootstrap和JQuery示例的原因。这些例子没有复杂的内容。 Bootstrap只有一行文字作为内容，但问题依然存在。
Speedy 建议这样做是因为文档重排。我可能不会删除节点，而是将您的动画放在绝对定位的容器中（如果可能的话）。这应该会减少或消除回流开销，并在理论上改善动画效果。值得一试。
@MarkGraham 我不确定我是否正确理解了您的评论，请您再解释一下吗？
@Hamid - 问题不在于折叠的一行......它是在动画发生时重新计算的子节点和父节点的位置。

标签： javascript jquery ios twitter-bootstrap angularjs

【解决方案1】：

这个问题的解决方案是使用纯 CSS 进行展开和折叠

HTML 代码

<body>
    <section>
      <article>
        <details>
          <summary>Step by Step Guides</summary>
          <details>
            <summary>Getting Started</summary>
            <p>1. Signup for a free trial</p>
          </details>
          <details>
            <summary>Setting up a backup schedule</summary>
            <p>This step assumes you have already signed up and installed the software</p>
          </details>
        </details>
        <details>
          <summary>Installation/Upgrade Issues</summary>
          <p>After setup the program doesn't start</p>
        </details>
      </article>

      <article>
        <details>
          <summary>SERVER Step by Step Guides</summary>
          <details>
            <summary>Getting Started</summary>
            <p>1. Signup for a free trial</p>
          </details>
          <details>
            <summary>Setting up a backup schedule</summary>
            <p>This step assumes you have already signed up and installed the software</p>
          </details>
        </details>
        <details>
          <summary>Installation/Upgrade Issues</summary>
          <p>After setup the program doesn't start</p>
        </details>
      </article> 

</section>
</body>

CSS 代码

    summary::-webkit-details-marker {
 color: #00ACF3;
 font-size: 125%;
 margin-right: 2px;
}
summary:focus {
    outline-style: none;
}
article > details > summary {
    font-size: 28px;
    margin-top: 16px;
}
details > p {
    margin-left: 24px;
}
details details {
    margin-left: 36px;
}
details details summary {
    font-size: 16px;
}

Jsfiddle 上的工作代码

【讨论】：