Question

我是角度JS的新手，并尝试做一些页面动画（进入和离开）。我正在开发一个由不同的人设置的项目，无法触发通用的ng-enter和ng-leave动画。我读到的是我可以简单地将css3 transiition添加到这些类中，并且它可以在没有运气的情况下开箱即用。在主app.js文件中，我们有像这样的ng-animate

  return ng.module('app', [
    'app.constants',
      'app.controllers',
      'app.directives',
      'app.filters',
      'app.services',
      'ngRoute',
      'ngAnimate',
      'ngSanitize'
  ]).run(function($rootScope) {
      $rootScope.clearAnimation = false;
  });
});

和css

@keyframes rotateFall {
    0%    { transform: rotateZ(0deg); }
    20%   { transform: rotateZ(10deg); animation-timing-function: ease-out; }
    40%   { transform: rotateZ(17deg); }
    60%   { transform: rotateZ(16deg); }
    100%  { transform: translateY(100%) rotateZ(17deg); }
  }

  /* slide in from the bottom */
  @keyframes slideOutLeft {
    to    { transform: translateX(-100%); }
  }

  /* rotate out newspaper */
  @keyframes rotateOutNewspaper {
    to    { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
  }

  /* entering animations --------------------------------------- */
  /* scale up */
  @keyframes scaleUp {
    from  { opacity: 0.3; -webkit-transform: scale(0.8); }
  }

  /* slide in from the right */
  @keyframes slideInRight {
    from  { transform:translateX(100%); }
    to    { transform: translateX(0); }
  }

  /* slide in from the bottom */
  @keyframes slideInUp {
    from  { transform:translateY(100%); }
    to    { transform: translateY(0); }
  }

  .ng-enter       { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
  .ng-leave       { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }

以及我如何在页面中导航

<li class="hex lrg residential market hide" ng-click="navigate('/tours/residential')"><p>Residential</p></li>

一切正常（页面和网站）没有过渡。我错过了什么吗？

使用ng-enter ng-leave进行角度js页面转换

0 个答案: