Question

我有一个角度动画的问题。我想让新创造的元素去旅行＆＃39;从创建它的输入到目的地。

我认为它与改变css position属性有关，而动画从绝对到相对，但不知道它为什么不起作用。

这是我的代码：

index.html的一部分：

<form ng-submit="add(name)">
  <input type="text" id="input-element" class="form-control" ng-model="name" />
  <button type="button" class="btn btn-default">Add</button>
</form>
<ul>
  <li class="animation" ng-repeat="item in list"><b>{{item}}</b></li>
</ul>

的CSS：

.animation.ng-enter {
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.animation.ng-enter {
  left: 25px;
  top: 25px;
  opacity: 0;
  position: absolute;
}

.animation.ng-enter.ng-enter-active {
  position: relative;
  left: 0;
  top: 0;
  opacity: 1;
}

控制器的主体（与我的问题无关）：

$scope.list = [];
$scope.add = function(name) {
  $scope.list.push(name);
};

当我从position: relative移除.animation.ng-enter.ng-enter-active时，它始终是绝对的。当我离开它时，位置总是相对的。

如何制作这样的旅行＆＃39;使用angular-animate从输入到目的地的动画？

这是我的傻瓜：http://plnkr.co/edit/m1xoP6GpJJZzhFhjALRd?p=preview。

角度动画从输入到目的地的新元素

0 个答案: