-1

I have a list of items, which are animated with :enter and :leave transitions. While entering the items have a height of 0, and when done, they should have a height of *. So they have a drawer/collapse animation. And all the content under the list moves obviously also down.

The animations work when the animated item is in viewport. But as soon as i am somewhere else under the list and a new item is added, i see that all the content moves down at once, without animation.

How can i fix this?

akcasoy
  • 6,497
  • 13
  • 56
  • 100
  • 1
    It would help if you can provide a working example. – Haijin Mar 08 '19 at 20:14
  • 1
    Please share your code. – Imon Mar 11 '19 at 11:44
  • you should not need the code, since it is what it is, and angular animations are not visible outside of viewport. Whoever knows the fix, should also know the problem. This is not so just in my case/code. – akcasoy Mar 13 '19 at 13:03

1 Answers1

0

What you are describing is not what I'm experiencing. Take a look at the snippet below. What I see when I'm scrolled down and something is added above the viewport, is that the page grows up outside the viewport and the scroll keeps the position that I'm at.

As suggested in one of the comment it would be great if you shared your code so that we could investigate your particular case.

(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>
Jakub Rusilko
  • 859
  • 12
  • 17
  • interesting... in your case the position of your buttons in viewport does not change.. in my case the whole content moves down as soon as a new item is added upper part.. i cannot share my whole code since there are hundreds of components which play together, but i will try to simply a Angular2 example.. maybe this is the difference. You use in your example Angular1. – akcasoy Mar 15 '19 at 12:19