html - 将淡入淡出和滑动(左/上/下/右)与 AngularJS 结合起来

Question

我看到很多单页应用程序在滚动等过程中使用淡入和滑动..

但我似乎找不到任何我只能与 Angular 的 ngAnimate 集成的东西，在所有网站上，它要么用新的库安装他们的新代码，我想阻止自己继续安装 1000在某些时候我无法缩放的模块(因为我不知道如何同时组合两个动画)

我看过这个代码示例:http://codepen.io/astrotim/pen/KDBbe我试图导入它并调整它以与 AngularJS 一起使用，但没有任何运气:/

HTML

<div ng-if="front_wallpaper" class="animated fade-and-slide"> MyText </div>

Angular 的应用 JS

angular.module('app', ['ngAnimate'])
.controller('SomeCtrl', function ($scope, $timeout) {
    $scope.front_wallpaper = false;
    $timeout(function () {
        $scope.front_wallpaper = true;
    },1000);

});

CSS

div {
            font-size: 48pt; 
            color: white; 
            position: relative; 
            left: -60%; top: 20%;
            opacity: 0;
            transition: all .75s ease;
            transition-duration: 5s;
        }

.fade-and-slide.ng-enter {  
  top: 21%;
  opacity: 1;
}

动画示例:http://shapebootstrap.net/item/1524946-lucid-html5-and-bootstrap-responsive-template/live-demo

或此处的白色按钮:http://wrapbootstrap.com/preview/WB0F82581

提前致谢

Answer 1

刚找到答案，如果我们使用 animation(不是 transition)，我们可以用逗号分隔符定义几个动画，即:openSpace & 移入

  -webkit-animation:
    openSpace 2s ease forwards,
    moveIn 0.3s 0.2s ease forwards;

完整示例

.list-item.ng-enter {
  max-height: 0;
  opacity: 0;
  transform: translateX(100%);

  -webkit-animation:
    openSpace 2s ease forwards,
    moveIn 0.3s 0.2s ease forwards;
}

@-webkit-keyframes openSpace {
  to {
    max-height: 300px;
  }
}

@-webkit-keyframes moveIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}