Question

我有一个ngAnimate依赖注入问题。我不知道为什么，但每当我在我的js代码中包含ngAnimate作为依赖时它就不起作用了...... 这不是剧本......

我有这个HTML代码：

private void print() {
    boolean playerGuessedCorrectly = false;
    while(!playerGuessedCorrectly) {
        playerGuessedCorrectly = checkIfGuessIsMyNumber();
    }
}

private boolean checkIfGuessIsMyNumber() {
   // userGuess is the next int entered by the user
   // computerNumber is a random number between 1 and 100
   if(userGuess == computerNumber) {
         System.out.print("You have guessed my number.");
         return true;
   } else {
         return false;
   }
}

和这个js代码：

<!doctype html>
<html ng-app="myApp">
        <head>


            <script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
            <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>

            <script src="codebuttonewb.js"></script>

            <style>
                    .hidden{
                        display:none;
                    }
                    ul{
                    //display:flex;
                    margin-bottom:10px;
                     list-style-type: none;
                    }
                    li span{
                    display:inline-block;
                    line-height:50px;

                    }
                    li img{
                    margin-right:10px;
                    border-radius:50%;
                    width:50px;
                    height:50px;
                    }
            </style>
        </head>
        <body ng-controller="myController">
            <input type="text" ng-model="search" placeholder="search">
            <ul ng-class="{'hidden' : !toggle}"><!--  if this value is false then show the class of hidden -->
                <li ng-repeat="item in list | filter:search"
                    ng-class="item.age>29 ? 'over-thirty' : 'under-thirty'">

                    <img ng-src="{{item.img}}"/>
                    <span> {{item.name}} - <em>{{item.age}}</em></span>
                </li>

            </ul>
            <button ng-show="!toggle" ng-click="toggle=true" >show names</button>
            <button  ng-show="toggle" ng-click="toggle=false">hide names</button>
            <form ng-submit="addPerson()">

                    <input type="text" placeholder="name" ng-model="name"/>
                    <br/>
                    <input type="number" placeholder="age" ng-model="age"/>
                    <br/>
                    <input type="submit" value="submit" />

                </form>

        </body>

</html>

任何解决方案都非常受欢迎。这是我第一次使用ngAnimate，所以我猜它可能是愚蠢的。

Answer 1

之前我遇到过类似的问题。尝试更改：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>

为：

<script src="https//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>

Answer 2

要使用ngAnimate，您需要添加任何CSS效果。我建议你使用一些动画css方法。

<div class="fade"></div>
<style>
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}
</style>

ngAnimate只会输入 ng-enter 和 ng-active 类。你需要自己写css。在这里我给出了淡化效果。

我似乎无法运行ngAnimate？

2 个答案: