1

以下のリンクを参照してください。

http://tympanus.net/TipsTricks/CSS3TimedNotifications/

では、CSS アニメーションの完了後、別のページに自動的にリダイレクトするにはどうすればよいでしょうか。

イベント シーケンスは次のようになります。

  1. ボタンをクリックします
  2. 通知の表示と非表示
  3. 自動的に別のページにリダイレクトされます。
4

2 に答える 2

0

HTML と CSS を見て、これを追加する必要があります。

$("input.fire-check").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){
    window.location.href = "http://google.com/";
});

編集1

jQuery を使用していないことに気付きました。追加する必要があるものは次のとおりです（以前に追加したものを削除します）：

function whichTransitionEvent(){//detects css transition end on all browsers
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

var transitionEnd = whichTransitionEvent();
var input = document.querySelector(".fire-check");//get first element with class fire-check
input.addEventListener(transitionEnd, redirect, false);//event listener redirects when transitions end
function redirect(){
    window.location.href = "http://google.com/";
}

EDIT 3 おっと、上記のコードを少し変更しました。うまくいくかどうか教えてください。

jQuery を追加する必要はありませんが、追加したい場合は、<head>タグの間に追加する必要があるものを以下に示します。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
于 2013-06-21T14:34:41.353 に答える