tomoya kitatani
portfolio site

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