Анимация Angular 'height' не работает, когда анимированная часть в данный момент отсутствует в окне просмотра браузера

#angular #angular-animations

#угловая #angular-анимации

Вопрос:

У меня есть список элементов, которые анимированы с помощью переходов : enter и : leave. При вводе элементы имеют высоту 0, а по завершении они должны иметь высоту *. Таким образом, у них есть анимация выдвижного ящика / свертывания. И все содержимое под списком, очевидно, также перемещается вниз.

Анимации работают, когда анимированный элемент находится в окне просмотра. Но как только я оказываюсь где-то в другом месте списка и добавляется новый элемент, я вижу, что все содержимое сразу перемещается вниз, без анимации.

Как я могу это исправить?

1. Было бы полезно, если бы вы могли предоставить рабочий пример.

2. Пожалуйста, поделитесь своим кодом.

3. вам не должен понадобиться код, поскольку он такой, какой есть, а анимации angular не видны за пределами окна просмотра. Тот, кто знает исправление, также должен знать проблему. Это не так только в моем случае / коде.

Ответ №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>

1. интересно… в вашем случае положение ваших кнопок в окне просмотра не меняется .. в моем случае все содержимое перемещается вниз, как только добавляется новый элемент в верхней части.. я не могу поделиться своим кодом целиком, поскольку существуют сотни компонентов, которые воспроизводятся вместе, но я попытаюсь просто привести пример Angular2.. возможно, в этом разница. В вашем примере вы используете Angular1.