ngIf with ngAnimate - 动画期间重复的 HTML 内容

ngIf with ngAnimate - duplicated HTML content during the animation

本文关键字：HTML 内容 with ngAnimate 动画 ngIf      更新时间：2023-09-26

我尝试做简单的角度动画。但是我有一个问题，当我快速单击按钮时（在动画完成之前），当我单击时会多次创建内容容器......

如何防止这种情况？我想在单击后停止动画，然后在同一个对象而不是新对象上启动动画？

吉斯菲德尔

.HTML

 <div ng-app="test">
    <div class="container" ng-controller="TestController as tCtrl">
        <div class="row">
            <div class="col-xs-12">                
                <a class="btn btn-default" ng-click="tCtrl.tt = 1"> 1 </a>
                <a class="btn btn-default" ng-click="tCtrl.tt = 2"> 2 </a>
            </div>
        </div>       
        <div class="row">
            <div class="col-xs-12 animate-if" ng-if="tCtrl.tt === 1">Chosen = 1</div>
            <div class="col-xs-12 animate-if" ng-if="tCtrl.tt === 2">Chosen = 2</div>
        </div>
    </div>
</div>

.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 中的一个错误，因为在控制台中我在 angular-animate 中.js在第 1348 行有错误undefined in not a function，其中包含operation.cancel()并且是：

  forEach(animationsToCancel, function(operation) {
       operation.cancel();
  });

当您快速单击左侧菜单"仪表板"和"用户"时，您可以在此处看到完整的问题。

编辑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和关键帧进行动画处理。这是一个笨蛋。

分配 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 将如下所示：

<button ng-click="front = !front">click to animate</button>
<div ng-show="front">Displayed</div>

你的 js

$scope.front = false;
相关文章：