Question

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

1-用Safari在Safari上打开Bootstrap网站（http://angular-ui.github.io/bootstrap/）。

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

您也可以针对JQuery测试此问题，以下是步骤：

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

根据我们的用户体验反馈，进行展开和折叠所需的时间非常慢。我研究了这个问题并调试了ANgularJS框架，看看这个问题来自哪里。似乎有一个名为EventHandler的方法导致了这个问题。

enter image description here

任何人都知道设计Expand和Collapse的其他选项在设备上快速有效吗？

Answer 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上的工作代码

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

1 个答案: