2

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;   
});
4

1 に答える 1

1

これが実際のバグであるかどうかに関係なく、機能的な例が求められていると思います。

オブジェクトがクリックされたときにクラスを使用して切り替えるアニメーションを実装するフィドルを作成しました。

CSS アニメーション jsFiddle :

http://jsfiddle.net/aA5k7/9/

この例の粗雑さを許してください。元の質問には HTML が含まれておらず、CSS は #panelWidth などのいくつかの変数を参照していたため、クリエイティブなライセンスを取り、元の精神を維持する実際の例を作成しようとしました。

CSS (Webkit と Mozilla をサポートしていますが、簡潔にするためにプレフィックス以外のオプションは含まれていません) では、アニメーション パラメーターを個別にロングハンド形式で指定します。

animation-fill-modeプロパティは、理解することが特に重要です。ここで詳細を読むことができます: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

HTML:

<div id="slidePanel">Slide Panel</div>

CSS:

/* CUSTOM SLIDING PANEL */
@-moz-keyframes panelSlideLeft {
    from {
        opacity: 1.0;
        -moz-transform: translateX(200px);
    }
    to {
        opacity: 1.0;
        -moz-transform: translateX(0px);
    }
}
@-moz-keyframes panelSlideRight {
    from {
        opacity: 1.0;
        -moz-transform: translateX(0px);
    }
    to {
        opacity: 1.0;
        -moz-transform: translateX(200px);
    }
}

@-webkit-keyframes panelSlideLeft {
    from {
        opacity: 1.0;
        -webkit-transform: translateX(200px);
    }
    to {
        opacity: 1.0;
        -webkit-transform: translateX(0px);
    }
}
@-webkit-keyframes panelSlideRight {
    from {
        opacity: 1.0;
        -webkit-transform: translateX(0px);
    }
    to {
        opacity: 1.0;
        -webkit-transform: translateX(200px);
    }
}
.slide-panel-right {
    -moz-animation-name: panelSlideRight;
    -moz-animation-duration: 0.35s;
    -moz-transition-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: both;
    -webkit-animation-name: panelSlideRight;
    -webkit-animation-duration: 0.35s;
    -webkit-transition-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;    
}
.slide-panel-left {
    -moz-animation-name: panelSlideLeft;
    -moz-animation-duration: 0.35s;
    -moz-transition-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: none;
    -webkit-animation-name: panelSlideLeft;
    -webkit-animation-duration: 0.35s;
    -webkit-transition-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: none;    
} 
#slidePanel {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 80px;
    height: 80px;
    border: 1px solid green;
    padding: 8px;
}

JS:

var open = false;

$("#slidePanel").on('click', function() {
  if(open) {
    $(this).removeClass('slide-panel-right');
    $(this).addClass('slide-panel-left');
  } else {
    $(this).removeClass('slide-panel-left');
    $(this).addClass('slide-panel-right');
  }
  open  = open ? false : true;   
});

CSS トランジションを使用して、同様の結果を (より少ないコードで) 実現できます。デモ用の別の jsFiddle を次に示します。

CSS 遷移 jsFiddle

http://jsfiddle.net/aA5k7/11/

于 2014-01-31T16:32:11.620 に答える