当动画部件当前不在浏览器的视口中时，角度“高度”动画不起作用

Question

我有一个项目列表，动画用：输入和：离开过渡。输入项目的高度为0，完成后，它们的高度应为*。所以他们有一个抽屉/倒塌动画。列表中的所有内容显然也会下降。

当动画项目在视口中时，动画可以工作。但是，只要我在列表下的其他位置并添加了一个新项目，我就会看到所有内容立即向下移动，没有动画。

我怎样才能解决这个问题？

Answer 1

你所描述的并不是我所经历的。看看下面的代码片段。当我向下滚动并在视口上方添加某些内容时，我看到的是页面在视口外部长大，滚动保持我所处的位置。

正如其中一条评论中所建议的那样，如果您共享代码以便我们可以调查您的具体案例，那就太棒了。

(function() {
    'use strict';

    angular.module('app', [
       'ngAnimate' 
    ]);
})();

(function() {
    'use strict';

    angular
        .module('app')
        .controller('HomeController', HomeController);

    function HomeController() {
        var vm = this;
        
        vm.counter = 0;
        vm.items = [];
        vm.addafter = addafter;
        vm.addbefore = addbefore;

        ////////////////

        function addafter() {
            vm.counter++;
            vm.items.push("item " + vm.counter);
        }
        
        function addbefore() {
            vm.counter++;
            vm.items.unshift("item " + vm.counter);
        } 
    }
})();

.main{
  height: 2000px;
}
.list-container{
  border: solid red 1px;
}
.list-item{
    transition: 0.3s linear all;
    overflow: hidden;
    height: 30px;
}
.list-item.ng-enter{
    opacity: 0;
    height: 0px;
}
.list-item.ng-enter-active{
    opacity: 1;
    height: 30px;
}
.buttons{
  margin-top: 80px;
}

<div ng-app="app" ng-controller="HomeController as home" class="main">
  <p>Add some items to the list, then scroll down so that you don't see the beginning of the list and click 'add before':</p>
  <div class="list-container">
    <div class="list-item" ng-repeat="item in home.items">{{item}}</div>
  </div>
  <div class="buttons">
    <button ng-click="home.addbefore()">add before</button>
    <button ng-click="home.addafter()">add after</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-animate.js">
</script>