1

私はiOSSafariタッチベースのアプリを構築していますが、CSSの遷移と変換がうまく機能していることがわかりました。

しかし、JavaScriptとCSSだけでは達成できないと思われることが2つあります。

  1. 通常、要素を0.2秒の持続時間で変換する必要があります。しかし、コードでは、時々即座に翻訳したい（初期配置）。期間を0に更新するか、遷移スタイルを完全に削除すると、効果がないように見えます（0.2sが不変であるかのように動作します）

  2. ズームするときに、transform-originプロパティを更新したいと思います。これも機能していないようで、元のスタイルシート設定値に固執しているようです。具体的には、gesturestartイベントとgestureendイベントでこれを実行しようとしています

うまくいけば、これを機能させるためのアプローチがあります。たぶんsetTimeout非同期処理？

アップデート：

＃1の問題をよりよく説明するためのjsフィドルの例があり、setTimeoutで修正されることがわかりましたが、これは私が改善したいと思う奇妙な解決策です。

http://jsfiddle.net/w9E7t/

これらの手順を同期的に実行できないようです。

  1. 即時移行のための適切なクラスを設定する
  2. トランジションスタイルを適用する
  3. クラスをデフォルト（遷移あり）状態にリセットします
4

1 に答える 1

1

  1. これを実現するには、2つのCSSクラスを使用します。1つはtiming-duration0に設定し、もう1つは200ミリ秒に設定してから、JSでプログラムでクラスを適用します。例として、このJSFiddleを見てください。

    Web開発のベストプラクティスの1つは、ドキュメントのパーツを構造/コンテンツ（HTML）、プレゼンテーション（CSS）、および対話/動作（JS）に分離することです。上記の例では、コンテンツの表示（時限翻訳）はCSSで定義されたままですが、JSはインタラクション（MouseClickイベント）に応答するためにのみ使用されます。

  2. JSのstyleプロパティtransform-originを使用して要素を変更できるはずです。これがJSFiddleWebkitTransformOriginの例です。これをiPhone4でテストしたところ、コンソールに新しいトランスフォームオリジンが正しく記録されました。繰り返しになりますが、これは、プレゼンテーションロジック（CSS）で定義されたクラスのスタイルルールを維持しながら、ジェスチャーイベントをリッスンし、要素のクラスを更新するためにのみJSを使用することによっても実現できます。

注意：私の例では、要素の.classNameを更新しています。要素にすでに多くのクラスがある可能性があるため、正しいクラスを適切に設定するためにaddClass / removeClass関数を実装する必要がある場合があります。そのいくつかの例は、Webにあります。

アップデート：

遅れて申し訳ありません...この問題に取り組むには2つの方法があり、最初にすでに発見した方法があります。

クラス名の切り替えを処理する別の方法は、webkitTransitionEndプロパティを使用することです。これは、要素の遷移が終了するたびに発生します。次のようになります。

document.getElementById('puck').addEventListener('webkitTransitionEnd', function() {
    puck
        .removeClass('without_transition')
        .addClass('with_transition')
}, false);

残念ながら、transition-durationプロパティが0に設定されている場合、このイベントは発生しません:(それが設計によるものかバグによるものかはわかりませんが、それが現在実装されている方法です（ただし、これ以降は設計によるものだと思います）ブラウザが実際に遷移を行っているのではなく、単に変換を適用していることを示します）。このアプローチの回避策は、transition-durationを1msに設定することです（これは基本的に瞬時に見えます）。

setTimeoutアプローチはハックに見えますが、クラスの切り替えから発生する遷移（transitionEndと同様）の後に関数が起動するため、多くのモバイルフレームワークグループはコード全体でそれを使用します。Sencha Touchを見てみると、何度も見つけることができます。

ここに私の例を示すために、JSfiddleをフォークしました。

于 2011-08-30T16:20:44.427 に答える