2015-06-27 97 views
1

我有一个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,所以我猜这可能是愚蠢的。

+0

我不在这里看到任何问题http://plnkr.co/edit/c0JhEjQUro41eiaOP2Nu?p=preview ..你能不能在这里重现它 –

回答

0

我遇到过类似的问题。尝试改变:

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

它使用这个脚本 – omer

+0

omer

+0

(https://) – omer

0

使用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。在这里我已经给淡入淡出效果。