2

要素の上にマウスを置くと、要素が反転します。ユーザーが要素をマウスオフして完了したときに遷移が開始されたときに JavaScript 関数を実行したいと思います。

つまり、ユーザーが要素の上にカーソルを置いていないときに、要素が自然な状態 (この場合は反転されていない状態) に戻ったときに、JavaScript を実行したいと考えています。

イベントにバインドしようとしましたwebkitTransitionEndが、ホバリングの遷移が完了したときと、マウスオフの遷移が完了したときに発生します。これら 2 つの遷移をどのように区別できますか?

私のCSSは次のようになります。

.back {
position: absolute;
z-index: 800;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.searchResult:hover .back {
position: absolute;
z-index: 900;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}

私のJavaScriptは次のようになります（マウスオーバーとマウスオフの両方の遷移（つまり、フリップとアンフリップ）の完了時に起動するため、不適切です）：

el.find('.back').bind("webkitTransitionEnd", function (e) { /* do stuff */ });
4

2 に答える 2

1

この問題は解決したと思います (まだ 2 分以上のテストを実行していません)。

target解決策は、イベント要素の既知の CSS プロパティに基づいて JavaScript に条件を追加することです。私の場合、反転した状態と反転していない状態で z-index が異なることがわかっています。これを JavaScript で使用すると、問題が解決するようです。

条件は次のようになります。

 if(e.originalEvent.propertyName === '-webkit-transform' && 
    $(e.originalEvent.target).css('z-index') === '800') { 

   /*we know we are at the end of the correct transition*/ 

 }

ただし、私のテスト ブラウザーは非常にモダンです (執筆時点): Chrome 22.0.1186.0 canary.

于 2012-06-27T21:26:40.543 に答える
0

イベント リスナーは、実際にはプロパティごとに 1 回、複数回起動します。event.propertyName でプロパティ名にアクセスできます。すべてを一緒に入れて... 

element.addEventListener("webkitTransitionEnd", function(e){
    if(e.propertyName == "width") {
        doSomething();
    }
}, false);

またはjQueryで

   $(element).on("webkitTransitionEnd", function(e){
        if(e.originalEvent.propertyName == "width") {
            doSomething();
        }
    });
于 2012-06-27T21:28:14.493 に答える