Javascript 停止由$animate.addClass启动的动画

有没有办法停止由$animate.addClass启动的动画

angular.module（“app”，[]）；
angular.module（“app”）.指令（“停止动画”，函数（$animate）{
返回{
链接：功能（范围、元素）{
setTimeout（函数（）{
//启动动画
作用域$applyAsync（函数（）{
var promise=$animate.addClass（元素“可见”）；
//停止动画
setTimeout（函数（）{
$animate.取消（承诺）；
}, 100);
});
});
}
};
});
.header{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：60px；
背景：红色；
转换：translateY（-100%）；
}
.header.is-visible{
变换：translateY（0）；
}
.header.is-visible{
转变：转变3s；
}

JS-Bin
也许您可以通过更改
来完成。可以看到
的转换为无。在setTimeout函数之后，您可以再次添加它

// Stop animation
setTimeout(function() {
        $(".is-visible").css("transition","none");
      }, 100);
 }

如果我理解正确，您可以使用
$animate.setClass
。删除你的
可见类，添加没有转换的新css


angular.module（“app”，[]）；
angular.module（“app”）.指令（“停止动画”，函数（$animate）{
返回{
链接：功能（范围、元素）{
setTimeout（函数（）{
scope.forceCancel=函数（）{
$animate.setClass（元素“是可见的”“是可见的”）；
}
//启动动画
作用域$applyAsync（函数（）{
var promise=$animate.addClass（元素“可见”）；
//停止动画
setTimeout（函数（）{
$animate.取消（承诺）；
}, 100);
});
});
}
};
});
.header{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：60px；
背景：红色；
转换：translateY（-100%）；
}
.header.is-visible{
变换：translateY（0）；
}
.header.is-visible{
转变：转变3s；
}
.header.is-visible-stopped{
变换：translateY（0）；
}

JS-Bin
取消