問題タブ [webkit-animation]

状況 : アイテムにイベント リスナーがあります。それを押すと、webkitAnimation を実行するメソッドが呼び出され、結果としてアニメーションの最後が返されます。

問題 : アイテムを数回クリックすると、Webkit アニメーションのリスナーがリセットされないため、多くのコールバックが発生します..

removeEventListener を使用しようとしましたが、機能しません。

前もって感謝します！

}

次のような .row と呼ばれる CSS 要素があります。

JavaScript または JQuery を使用して、アニメーションの速度 (100 秒) を動的な値に変更したいと考えています。だから私はこれを試しました：

これにより、アニメーションの再生が停止します。行は移動しません。インスタンスの高さなどの他の値を 200px に変更すると、高さが変わります。問題は、アニメーションが殺されることです。

どうすればこれを解決できますか?

Webkit アニメーションと CSS を使用して回転カルーセルを作成しました。カルーセルの下に 3 つのアイテムがあり、各アイテムには写真とテキストの宣伝文句があります。テキストを3つの異なるリンクにリンクしようとしています。

現在、3 つのテキスト ボックスはすべて同じリンク (最後のリンク) にリンクされています。z-index と何か関係があるのではないかと感じていますが、よくわかりません。すべてのコードを jsfiddle に入れました。

http://jsfiddle.net/LGbbf/1/

どんな助けでも大歓迎です！

関連する HTML コード

関連する CSS コード

クリックでカードを移動し、遷移のアニメーションで緑色のテーブルに置きます。次に、カードがテーブルにあるとき、それらをクリックすると、前面が表示され、背面が返されます。コードが機能しません。ページの左側にバック カードが表示されますが、クリックしても何も起こりません。

を使用して JavaScript を介してanimation-duration(この場合は) プロパティを変更した後、Chrome の要素インスペクタに変更が表示されますが、実際のアニメーション速度は変更されません。また、要素インスペクタで値を手動で変更しても、変更はありません。-webkit-animation-durationsetProperty("-webkit-animation-duration", value + "s")

次のイベントリスナーに接続されているアニメーション速度値を取得するように入力フィールドを設定しました（orbitFactor他の場所で定義されたグローバル変数です）：

イベント リスナーは確実に呼び出され、-webkit-animation-duration値は要素インスペクターで変化しますが、アニメーションの速度は変化しません。に関して私がここで見逃しているものはあり-webkit-animation-durationますか? 同じ方法を使用して変更している他のプロパティ (例:widthおよび) は、目に見えて変化します。height

前もって感謝します

編集: これは Chrome 40 の問題ですが、Chrome 42 と Firefox 35 では正常に動作することに注意してください。

私はJSに精通しておらず、私の質問に同様の回答を適用する方法を理解できなかったので、助けとアドバイスをいただければ幸いです.

私が作っているもの: 私は webview ポップアップに取り組んでいます。アプリ内ボタンと同じようにアニメーション化したい下部に閉じるボタンがあります。

やり方: 現在、単純に で閉じてい<a href="#" onclick="window.close(); return false;"><img class="button" src="img.png"></a>ます。

モードで変化する Webkit アニメーションがありimg.button:activeます。

私の問題: ウィンドウが閉じる前にトランジションを完了させたいです。トランジションがいつ終了したかを確認するためにを使用する必要があることはわかっていaddEventListenerますが、 でこれを正しく行うことができないようですwindow.close()。これを行う良い方法はありますか？

私は一日中大量のドキュメントを読んでいて、これを自分で理解することはできませんでした.

私の目的は、イメージ スライダーを作成することです。APPLE ロゴ アニメーションが実行されている間、Apple 製品が下から急降下します。問題はこれです。@keyframes アニメーションを追加して、iPhone を右 (私たちの右) から表示し、画面を左に急降下させたままにします。

しかし、MACBOOK を追加すると、アニメーションも何も追加しなくても、iPhone と一緒に動作します。

HTMLとスタイルは次のとおりです。

html:

スタイル: