Ищете улучшение анимации слайд-вниз с помощью angular.js

Question

У меня есть пример кода запуска (http://jsfiddle.net/Fuunq/), который показывает анимацию слайда с использованием angular.js (1.2.0). Но есть две проблемы, которые я не знаю, как решить:

a) При нажатии на ссылку «Добавить элемент» анимация сначала перемещается по ссылке «Добавить элемент», а затем переходит в новый элемент с вершина. Как это можно изменить, чтобы ссылка «Добавить элемент» сместилась вместе с новым появляющимся элементом?

b) Как я могу предотвратить, что элементы исчезают, когда страница загружается в первый раз?

HTML

<div ng-controller="MyCtrl">  
    <div ng-repeat="item in items" class="animation-slide-down"> 
     <div class="item"> 
      <div>Name: {{item.name}}</div> 
      <div>Color: {{item.color}}</div> 
     </div> 
    </div> 

    <a href="#" ng-click="addItem()">Add item</a> 
</div> 

CSS

.item { 
    margin-top: 5px; 
    padding: 15px; 
    background-color: #34ac54; 
    border: 1px solid black; 
} 

@-webkit-keyframes slide_down { 
    0% { 
    -webkit-transform: translateY(-100%); 
    opacity: 0; 
    z-index: -100; 
    } 

    99% { 
    z-index: -100; 
    } 

    100% { 
    -webkit-transform: translateY(0); 
    opacity: 1; 
    z-index: 0; 
    } 
} 

@keyframes slide_down { 
    0% { 
    transform: translateY(-100%); 
    opacity: 0; 
    z-index: -100; 
    } 

    99% { 
    z-index: -100; 
    } 

    100% { 
    transform: translateY(0); 
    opacity: 1; 
    z-index: 0; 
    } 
} 

.animation-slide-down.ng-enter { 
    -webkit-animation: slide_down 3s ease-in; 
    animation: slide_down 4s ease-in; 
} 

JS

var myApp = angular.module('myApp', ['ngAnimate']); 

function MyCtrl($scope) { 
    $scope.name = 'foo'; 

    $scope.items = [ 
     {name: 'Item 1', color: 'blue'}, 
     {name: 'Item 2', color: 'red'} 
    ] 

    $scope.addItem = function() { 
     $scope.items.push({name: 'Another item', color: 'black'}) 
    } 
} 

Спасибо за вашу помощь!

Answer 1

a) насколько я знаю, это может быть достигнуто только с отрицательным переходом на верхний предел к вашему целевому значению 5px. Есть одна проблема с этим: вы должны знать точную высоту одного элемента.

@-webkit-keyframes slide_down { 
    0% { 
    margin-top: -68px; 
    opacity: 0; 
    z-index: -100; 
    } 

    99% { 
    z-index: -100; 
    } 

    100% { 
     margin-top:5px; 
    opacity: 1; 
    z-index: 0; 
    } 
} 

b) вы можете использовать услугу $ animate. У службы есть активированный метод, поэтому вы можете отключить или включить анимацию в любое время. вот ваш код контроллера, который отключает анимацию при запуске и после запуска включает анимацию. трюк - это $ timeout service. с этим вы Defer активации анимации до следующего дайджеста цикла не происходит:

function MyCtrl($scope, $animate, $timeout) { 
    $animate.enabled(false); 

    $scope.name = 'foo'; 

    $scope.items = [ 
     {name: 'Item 1', color: 'blue'}, 
     {name: 'Item 2', color: 'red'} 
    ] 

    $scope.addItem = function() { 
     $scope.items.push({name: 'Another item', color: 'black'}) 
    } 
    $timeout(function(){ 
    $animate.enabled(true); 
    }); 
} 

вот рабочий пример:

http://jsfiddle.net/CKF47/