角ngShow动画不能正常工作

https://docs.angularjs.org/api/ng/directive/ngShow

我把一切都在我的本地

为什么不工作对我的地方？

我错过了什么？

<!doctype html> 
<html xmlns:ng="http://angularjs.org" ng-app="animateApp"> 
    <head>

跳过风格乐部..因为它太长

<script src="http://code.angularjs.org/1.2.15/angular.js"></script> 
    <script src="http://code.angularjs.org/1.2.15/angular-animate.js"></script> 
    <script> 
     angular.module('animateApp', ['ngAnimate']); 
     var thumbsUp = element(by.css('span.glyphicon-thumbs-up')); 
     var thumbsDown = element(by.css('span.glyphicon-thumbs-down')); 

     it('should check ng-show/ng-hide', function() { 
      expect(thumbsUp.isDisplayed()).toBeFalsy(); 
      expect(thumbsDown.isDisplayed()).toBeTruthy(); 

      element(by.model('checked')).click(); 

      expect(thumbsUp.isDisplayed()).toBeTruthy(); 
      expect(thumbsDown.isDisplayed()).toBeFalsy(); 
     }); 

    </script> 
    </head> 
    <body> 
    <h2>Animation - Animate</h2> 

Click me: <input type="checkbox" ng-model="checked"><br/> 
<div> 
    Show: 
    <div class="check-element animate-show" ng-show="checked"> 
     <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked. 
    </div> 
</div> 
<div> 
    Hide: 
    <div class="check-element animate-show" ng-hide="checked"> 
     <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked. 
    </div> 
</div>

  .animate-show { 
      line-height:20px; 
      opacity:1; 
      padding:10px; 
      border:1px solid black; 
      background:white; 
     } 

     .animate-show.ng-hide-add, 
     .animate-show.ng-hide-remove { 
      display:block!important; 
     } 

     .animate-show.ng-hide-add.ng-hide-add-active, 
     .animate-show.ng-hide-remove.ng-hide-remove-active { 
      -webkit-transition:all linear 0.5s; 
      transition:all linear 0.5s; 
     } 

     .animate-show.ng-hide { 
      line-height:0; 
      opacity:0; 
      padding:0 10px; 
     } 

     .check-element { 
      padding:10px; 
      border:1px solid black; 
      background:white; 
     }

来源

2014-05-16 Young

是您的'角animate.js'真的在不同的目录'angular.min.js '？那看起来很腥。 –

现在我得到了“元素未定义”错误。 – Young

样式部分是控制它如何生成动画的部分。所以你需要在这里包括那部分。如果它太长，那么把它缩短并放在这里。 https://docs.angularjs.org/guide/animations – cjmling

从我可以从你提供的代码集;这就是你要找的人...

working jsFiddle

注：我改变了一些CSS得到淡出工作。我也不知道什么不适合你。你的问题提到了ng-show动画，但我没有看到任何代码试图在节目上进行动画制作。当我把你的代码放入jsFiddle时，复选框不起作用，以及在ng-hide上没有动画。两人现在都在jsFiddle工作。那是你在找什么？如果没有，我们来解决吧。

var app = angular.module('myApp', ['ngAnimate']); 

app.controller('MyCtrl', function ($scope) {});

HTML ...

<div ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
    <body> 
     <h2>Animation - Animate</h2> 
     Click me: 
     <input type="checkbox" ng-model="checked"> 
     <br/> 
     <div>Show: 
     <div class="check-element animate-show" ng-show="checked"> 
      <span class="glyphicon glyphicon-thumbs-up"></span> 
      I show up when your checkbox is checked.</div> 
     </div> 
     <div> 
      Hide: 
      <div class="check-element animate-show" ng-hide="checked"> 
      <span class="glyphicon glyphicon-thumbs-down"></span> 
      I hide when your checkbox is checked.</div> 
      </div> 
     </div> 
     </div> 
    </body> 
    </div> 
</div>

CSS ...

.animate-show { 
    line-height:20px; 
    opacity:1; 
    padding:10px; 
    border:1px solid black; 
    background:white; 
} 

.animate-show.ng-hide-add, .animate-show.ng-hide-remove { 
    display:block!important; 
} 

.animate-show.ng-hide-add { 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
} 

.animate-show.ng-hide { 
    line-height:0; 
    opacity:0; 
    padding:0 10px; 
} 

.check-element { 
    padding:10px; 
    border:1px solid black; 
    background:white; 
}

来源

2014-12-09 17:03:58 SoEzPz

角ngShow动画不能正常工作

回答

相关问题