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

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/

寻找使用angular.js改进下滑动画

1 个答案: