Question

这是来自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;
      }

Answer 1

从我提供的代码中收集的内容;这就是你要找的......

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

angular ng显示动画不起作用

1 个答案: