在ui-router中保持onExit

Question

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

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

然而，一旦状态离开，退出状态的视图就会被破坏，并且没有动画。有没有办法“坚持”＃34;在动画完成之前，状态退出一段时间？

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

Pure 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
    }
}