2

我确实有一个正在运行的代码示例（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'})
    }
}

谢谢你的帮助！

4

1 回答 1

0

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 服务。这样您就可以推迟激活动画，直到下一个摘要周期发生：

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/

于 2014-01-08T21:38:19.200 回答