2

这是来自 angularjs 示例

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;
      }
4

1 回答 1

3

从我可以从您提供的代码中收集到的信息；这就是你要找的...

工作的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-09T17:03:58.107 回答