html gif重复播放,javascript – ngIf with ngAnimate – 动画期间重复的HTML内容

我尝试做简单的角度动画.但是我遇到了一个问题,当我快速点击按钮时(在动画完成之前),我点击时会多次创建内容容器…

如何防止这种情况？我希望在单击后停止动画,然后在不在新对象上的同一对象上开始动画？

HTML

1

2

Chosen = 1

Chosen = 2

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

Displayed

你的js

$scope.front = false;