CSS3 アニメーションが Firefox で正しく動作しないという問題を詳しく説明している記事をいくつか見つけました。
Firefox は CSS アニメーションを 1 回だけ実行します
と
Firefox/jQuery/CSS アニメーションのバグをまとめて文書化しましたか?
しかし、これらの修正は私の問題には関係ありませんでした。これらのアニメーションは Safari/Chrome で動作しており、すべての css に正しいベンダー プレフィックスがあります (Firefox では必要ありませんが)。Jquery の add / remove class イベントを使用してアニメーションをトリガーしています。firebug で、期待どおりにクラスが変更されていることがわかります。
唯一の問題は、アニメーションが最初に起動することですが、二度と起動せず、デフォルトでパネルを非表示にして再表示するだけです
CSS:
/* CUSTOM SLIDING PANEL */
@-webkit-keyframes panelSlideLeft {
from {
opacity: $panelOpacityStart;
-webkit-transform: translateX(0);
}
to {
opacity: $panelOpacityEnd;
-webkit-transform: translateX($panelWidth);
}
}
@-moz-keyframes panelSlideLeft {
from {
opacity: $panelOpacityStart;
-moz-transform: translateX(0);
}
to {
opacity: $panelOpacityEnd;
-moz-transform: translateX($panelWidth);
}
}
@keyframes panelSlideLeft {
from {
opacity: $panelOpacityStart;
transform: translateX(0);
}
to {
opacity: $panelOpacityEnd;
transform: translateX($panelWidth);
}
}
.slide-panel-left-open {
opacity: $panelOpacityEnd;
-webkit-animation: panelSlideLeft $animationDuration linear;
-moz-animation: panelSlideLeft $animationDuration linear;
animation: panelSlideLeft $animationDuration linear;
-webkit-transform: translateX($panelWidth);
-moz-transform: translateX($panelWidth);
transform: translateX($panelWidth);
}
.slide-panel-left-close {
-webkit-animation: panelSlideLeft $animationDuration linear reverse;
-moz-animation: panelSlideLeft $animationDuration linear reverse;
animation: panelSlideLeft $animationDuration linear reverse;
}
また、javascript では、ブール値を使用して変更するクラスを決定し、slidePanel.side が Jquery オブジェクトに設定されており、Firefox でも期待どおりに「左」または「右」に変更されています (右のスライド パネルがあります)。もこの関数を使用します)。
JS:
slidePanel.bind('togglePanel', function() {
if(slidePanel.open) {
slidePanel.removeClass('slide-panel-' + slidePanel.side + '-open');
slidePanel.addClass('slide-panel-' + slidePanel.side + '-close');
} else {
slidePanel.removeClass('slide-panel-' + slidePanel.side + '-close');
slidePanel.addClass('slide-panel-' + slidePanel.side + '-open');
}
slidePanel.open = slidePanel.open ? false : true;
});