Question

我是Ionic的新人。我尝试使用本教程添加动画：

http://gonehybrid.com/how-to-animate-your-ionic-app-with-animate-css-and-nganimate/

所有工作都很顺利，直到有关步骤。我不知道为什么，但如果我添加一个自定义类，例如没有任何事情发生。这是我的代码（p.s.我不会编辑我的app.js.ng-animate包含在Ionic中吗？）：

 <ion-content has-bouncing="false">
        <a class="whiteBack" />
        <div class="staffList">

            <a class="item item-avatar animate patate">
                <img src="https://cdn4.iconfinder.com/data/icons/general04/png/256/clients.png">
                <h2>Stefano Z.</h2>
                <p>iOS & Android App Developer</p>
            </a>
    </ion-content>

CSS：

 /*animation*/ 
    patate.ng-enter {
        -webkit-animation: fadeInLeft 1s;
      animation: fadeInLeft 1s;
    }

我可能会错过index.html中的内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="css/animate.css" rel="stylesheet">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
     <script src="http://code.ionicframework.com/0.9.23/js/angular/angular-animate.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
  </head>

  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

Answer 1

ng-animate包含在Ionic框架中，只需要应用animated类，它应该在动画效果之前，即：class="animated fade-in-out"

所以也许这个：

<a class="item item-avatar animate patate">

应该是：

<a class="item item-avatar animated patate">

Answer 2

您可以添加“ng-animate-children”属性，如下所示：

<body ng-app="starter" ng-animate-children="true">

详细信息： https://docs.angularjs.org/api/ngAnimate/directive/ngAnimateChildren

Answer 3

Ionic在ng-animate（bug）方面存在很多问题。尝试使用angular1.3.0和Ionic1.3.2

ng-animate不能在我的IONIC应用程序中工作

3 个答案: