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

Question

我有一个项目列表，它们带有：enter和：leave过渡动画。输入时，项目的高度为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>