Как перейти с помощью ng-repeat вертикально сложенных элементов div? - PullRequest
Новая
       16

Как перейти с помощью ng-repeat вертикально сложенных элементов div?

0 голосов
/ 01 июля 2018

У меня есть 3 элемента div, вертикально сложенных.

Если верхняя часть удалена, я хочу, чтобы нижние переместились на верхнюю, но с переходом в 1 секунду, а не сразу.

Ниже мой код ручки и код

https://codepen.io/DhawalSawla/pen/qKgZdd

HTML: 

<div ng-app="app">
  <div ng-controller="appCtrl">
    <div class="outer-box">
      <div class="feed" ng-repeat="f in data.feeds">
        {{f}}
      </div>
    </div>

  </div>
</div>

CSS: 

.outer-box {
  border: 1px solid red;
  width: 500px;
  height: 300px;
  overflow: hidden;
  transition: all s linear;
  position: relative;
}
.feed {
  border: 1px solid green;
  width: 500px;
  height: 100px;
  transition: all 1s linear;
  position: absolute;
}

.feed:first-of-type {
  animation-name: display;
  animation-duration: 3s;
}

.feed:nth-of-type(2) {
  top: 100px;
}

.feed:nth-of-type(3) {
  top: 200px;
}

@keyframes display {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

JS: 

var app = angular.module('app', []);
app.controller('appCtrl', ['$scope','$http', function($scope, $http){
  $scope.data = {
    feeds: []
  };
  $scope.data.feeds = [];
  $scope.data.feeds.push('Feed 1');
  $scope.data.feeds.push('Feed 2');
  $scope.data.feeds.push('Feed 3');

  setInterval(function() {
    if ($scope.data.feeds.length > 0) {
      console.log('splice1');
      $scope.data.feeds.splice(0,1);
      console.log($scope.data.feeds);
      $scope.$apply();
    }
  }, 1000);
}]);

Я пытаюсь создать ленту новостей, и для этого необходима эта функция.

Пожалуйста, дайте мне знать, что я не так делаю.

...