css - 寻求使用 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 服务。该服务有一个 enabled 方法，因此您可以随时禁用或启用动画。这是您的 Controller 代码，它在开始时禁用动画，在开始后启用动画。诀窍是 $timeout 服务。这样你就可以推迟激事件画，直到下一个摘要周期发生:

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/