html gif重复播放,javascript – ngIf with ngAnimate – 动画期间重复的HTML内容
我尝试做简单的角度动画.但是我遇到了一个问题,当我快速点击按钮时(在动画完成之前),我点击时会多次创建内容容器…
如何防止这种情况？我希望在单击后停止动画,然后在不在新对象上的同一对象上开始动画？
HTML
JS
var app = angular.module('test', ['ngAnimate']);
app.controller('TestController', function ($scope) {
this.tt = 1;
});
CSS
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition: opacity 5.2s ease-in-out;
-moz-transition: opacity 5.2s ease-in-out;
-ms-transition: opacity 5.2s ease-in-out;
transition: opacity 5.2s ease-in-out;
}
.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
z-index: 0;
opacity: 0;
}
.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
z-index: 1;
opacity: 1;
}
编辑：
我确实更改了代码以使用ngRoutes和ngView而不是ngIf,但ngAnimate的行为是相同的.
我认为它在Angular中可能是一个错误,因为在控制台中我的错误未定义在第1348行的angular-animate.js中的函数中,该函数包含operation.cancel()并且是以下部分的一部分：
forEach(animationsToCancel, function(operation) {
operation.cancel();
});
当您点击左侧菜单“仪表板”和“用户”快速时,您可以看到完整的问题here.
编辑2：
我现在使用的解决方案：
this.fn_change_view = function (str_view, $event) {
if (!this.contentStopAnim) {
this.contentStopAnim = true;
this.active_view = str_view;
$timeout(function () {
template.contentStopAnim = false;
}, 360);
} else {
$event.preventDefault();
}
};
我在动画完成之前阻止更改位置href,但这不是我很高兴的解决方案……
最佳答案 您可以使用ng-show和关键帧进行动画处理.这是一个
plunker.
分配css事件.
.ng-hide-add {
animation:0.1s keyFrameLeave ease;
}
.ng-hide-remove {
animation:0.5s keyFrameEnter ease;
}
注册关键帧
@keyframes keyFrameEnter {
0% {
transform: translate(0,100px);
opacity: 0;
}
100% {
transform: translate(0,0);
opacity: 1;
}
}
@keyframes keyFrameLeave {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
你的HTML看起来像这样：
click to animate
你的js
$scope.front = false;