1

iOS アプリケーション内で UIWebView を使用しており、webView では Bootstrap UI を使用して展開アニメーションと折りたたみアニメーションを設計しました。私が使用した JavaScript フレームワークは ANGularJS です。私が直面した問題は、展開と折りたたみのアニメーションが遅いことです。お使いのデバイス (iPhone または iPad) で次の手順に従うと、この問題を簡単に再現できます。

1- iPad の Safari でBootstrap Web サイト ( http://angular-ui.github.io/bootstrap/ ) を開きます。

2- 折りたたみ段落の下で、サンプル ボタンをタップします。これにより、単純なコンテンツが折りたたまれて展開されます。コンテンツの展開に時間がかかることに注意してください。

この問題は JQuery でもテストできます。手順は次のとおりです。

1- iPad を使用して Safari でJQuery Mobile Web サイト ( http://view.jquerymobile.com/1.3.1/dist/demos/widgets/collapsibles/ ) を開きます。2- サンプル ボタンをタップすると、単純なボタンが展開および折りたたまれます。コンテンツの展開に時間がかかることに注意してください。

ユーザー エクスペリエンスのフィードバックによると、展開と折りたたみにかかる時間は非常に遅いです。この問題について調査し、ANGularJS フレームワークをデバッグして、この問題がどこから来たのかを確認しました。この問題を引き起こす EventHandler というメソッドがあるようです。

ここに画像の説明を入力

デバイスで高速に動作する Expand と Collapse を設計するための他のオプションは何か知っている人はいますか?

4

1 に答える 1

2

この問題の解決策は、展開と折りたたみに純粋な 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 の作業コード

于 2014-01-25T14:17:54.390 に答える