javascript - 在 ui-router 中保持 onExit

Question

我想在用户离开某个状态时在页面中的某个元素上显示动画。这是我目前拥有的:

{
    .....,
    views: { ... },
    onExit: function(){
        someEle.classList.remove("someClass");   //CSS transition
    }
}

但是，一旦离开状态，退出状态的 View 就会被破坏并且没有动画。有没有办法在动画完成之前“阻止”状态的退出一定时间？

Answer 1

检查这个新的尝试，在 <a> 上点击事件标签。我成功地阻止了事件在过渡期间触发，甚至设法重置事件的 defaultPrevented 属性并从 transitionend 调度它事件，但即使事件肯定会触发(因为链接上的第二次转换)，它仍然没有重定向到链接 url。但是，我能够通过访问 target.href 来做到这一点。事件的属性。查看下面的代码:

纯 JS:

var links = document.getElementsByTagName("a");
function onTransitionEnd(event) {
    window.location.href = event.target.href;
    // Uncomment line below to refire the event
    // event.target.dispatchEvent(event);
}
for(i=0; i<links.length; i++) {
    links[i].addEventListener("click", function(e) {
        this.addEventListener("transitionend", function() {
            // Uncomment lines below to refire the event
            /* delete e.defaultPrevented;
            e.defaultPrevented = false; */
            onTransitionEnd(e);
        });
        if( this.className.search(/animate/) > -1 )
            this.className = this.className.replace("animate", "");
        else
            this.className = this.className + " animate";
        e.preventDefault();
    });
}

纯 JS Fiddle .

使用 jQuery:

function onTransitionEnd(event) {
    console.log(event);
    window.location.href = event.target.href;
}
$("a", this).on("click", function (e) {
    if ( $(this).hasClass("animate") )
        $(this).removeClass("animate");
    else
        $(this).addClass("animate");
    $("a").on("transitionend", function () {
        onTransitionEnd(e);
    });
    e.preventDefault();
});

jQuery Fiddle .

使用 OP 的代码(纯 JS):

function onTransitionEnd(event) {

    /* do stuff here */

    // Uncomment line below to refire the event
    // event.target.dispatchEvent(event);
}

{
    .....,
    views: { ... },
    onExit: function(e){
        someEle.addEventListener("transitionend", function() {
            // Uncomment lines below to be able refire the event on `transitionend`
            /* delete e.defaultPrevented;
            e.defaultPrevented = false; */
            onTransitionEnd(e);
        });
        someEle.classList.remove("someClass");   //CSS transition
    }
}