Question

我正在尝试使用ngAnimate创建基本的javascript动画，但是在添加元素时不会触发事件/动画。

基本上，我在点击时添加了一个带有test类的元素，它应该将其颜色更改为绿色。但颜色不会改变，警报也不会触发。这是从教程中提取的基本示例，因此它应该正常工作。

知道可能出现什么问题吗？

HTML：

<body ng-controller="MainController as Ctrl">
   <h1>Hello Plunker!</h1>
   <span ng-click="Ctrl.append()">Add</span>
</body>

app.js：

var app = angular.module("myApp", ['ngAnimate']);

app.controller("MainController", function(){
  this.append = function(){
    var li = $('<li></li>').addClass('test').text("hey");
    $('body').append(li);
  };
});

app.animation(".test", function(){
   return {
    enter: function(element, done) {
      alert(element);
      console.log(element);
      $(element).css('color', 'green');
      done();
    },
    leave: function(element, done) { }
  };
});

plunker中的示例：http://plnkr.co/edit/alTUxFw4twL4LAaCDZvG?p=streamer

Answer 1

在Angular中，做出类似的事情是完全没有意义的，我已经改变了你的代码，使其按照我认为你希望它工作的方式工作，但是在＃34; Anular Way＆＃34中;。

请记住，在Angular中你永远不应该从Controller中进行DOM操作，DOM操作只能在指令内完成。控制器应该处理模型，视图中的更改应该通过使用模型的指令来完成。您在代码中所做的是使用该指令直接更新DOM而无需更改模型或使用指令，因此Angular不知道该更改刚刚发生。

现在你的控制器看起来像这样：

app.controller("MainController", function($scope){
  $scope.messages = [];
  var cont = 0;
  this.append = function(){
    $scope.messages.push({id:cont++, text:'hi '});
  };
});

您的观点如下：

  <body ng-controller="MainController as Ctrl">
    <h1>Hello Plunker!</h1>
     <ul class="example-animate-container">
      <li ng-repeat="message in messages" class="animate-repeat test">{{message.text}}</li>
    </ul>
    <span ng-click="Ctrl.append()">Add</span>
  </body>

Example

我还建议你看一下："Thinking in AngularJS" if I have a jQuery background?

编辑：

根据@PSL请求，我刚刚在示例中添加了几个ng-repeat动画。

style.css的补充：

.example-animate-container {
  background:white;
  border:1px solid black;
  list-style:none;
  margin:0;
  padding:0 10px;
}

.animate-repeat {
  line-height:40px;
  list-style:none;
  box-sizing:border-box;
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity:0;
  max-height:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
  max-height:40px;
}

ngAnimate输入功能不会触发

1 个答案:

Example

编辑：