我似乎無法運行ngAnimate？

我有一個ngAnimate依賴注入問題。我不知道爲什麼，但每當我有ngAnimate我的js代碼裏面依賴它不工作... 這不是劇本......我似乎無法運行ngAnimate？

我有這樣的HTML代碼：

<!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>

和這個js代碼：

angular.module('myApp', ['ngAnimate']) 
      .controller("myController",function($scope){ 


       $scope.toggle =true; 


       $scope.list=[ 
       {name:'bla',age:28,img: 'https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg'}, 
       {name:'blabla',age:38,img: 'https://s3.amazonaws.com/uifaces/faces/twitter/mlane/128.jpg'}, 
       {name:'blaba',age:23, img:'https://s3.amazonaws.com/uifaces/faces/twitter/felipenogs/128.jpg'}, 
       {name:'blablala',age:56, img:'https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg'} 
       ]; 


       $scope.addPerson= function(){ 
        $scope.list.push({name:$scope.name,age:$scope.age}); 
        $scope.name=""; 
        $scope.age=""; 
       }; 
      });

任何解決辦法將是更受歡迎。這是我第一次使用ngAnimate，所以我猜這可能是愚蠢的。

來源

2015-06-27 omer

我不在這裏看到任何問題http://plnkr.co/edit/c0JhEjQUro41eiaOP2Nu?p=preview ..你能不能在這裏重現它 –

我遇到過類似的問題。嘗試改變：

<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>

來源

2015-06-27 13:02:38 MattDionis

它使用這個腳本 – omer

– omer

（https：//） – omer

使用ngAnimate您需要添加任何與它的CSS效果。讓我給你建議一些animation-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將onlye進入NG-進入和NG活性類。你需要寫自己的CSS。在這裏我已經給淡入淡出效果。

來源

2015-06-27 13:06:07 eronax59

我似乎無法運行ngAnimate？

回答

相關問題