CSS3アニメーションのリセット
ページ遷移やボタンをクリックした際、CSS3のリセット(再スタート)はどうするのか。
JavaScriptだと操作できるがCSS3の場合簡単にはいかない。
調べると要素のクローンを作る方法がありました。
下記のように対応しました。
//イベント発火
$(window).load(function(){
currentSlideShow();
});//change functions
function currentSlideShow() {
$(‘.wrapper’).removeClass(‘anime-start’);
animeRestart($(‘.current .wrapper’));
}//wrapperをコピー&ペースト
//同時にアニメスタートのクラスを付与
function animeRestart(thisElm) {
var copyTargetElm = thisElm.clone(true);
thisElm.before(copyTargetElm);
thisElm.prev().addClass(‘anime-start’);
thisElm.remove();
}