Question

我看到很多单页应用在滚动等过程中使用fade-in和slide-up。

但我似乎无法找到任何我只能与Angular的ngAnimate集成的东西，在所有网站中，它都要用新的lib安装新的代码，我想阻止自己继续安装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＆amp; moveIn

  -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);
  }
}

将渐变和滑动（左/上/下/右）与AngularJS结合使用

HTML

Angular的应用JS

CSS

1 个答案: