ng-show с ng-animate работает неправильно

Я не вижу свою ошибку в следующем фрагменте. Цель состоит в том, чтобы элементы div появлялись и исчезали, тогда как мой результат заключается в том, что они мгновенно скрываются/показываются. Может ли кто-нибудь быть столь любезным, чтобы указать на мою ошибку, поскольку я не вижу ее.

PLNKR- http://plnkr.co/edit/c0HgL56yOqrznIkfbmsR?p=preview

HTML/скрипт

<body ng-controller="test">

    <p>
      <button ng-click="show=!show">Toggle</button>
    </p>

    <div ng-show="show" 
         class="blue-div animate-show">A</div>

    <div ng-hide="show" 
         class="green-div animate-show">B</div>

    <script>
      angular.element(document).ready(function(){

        var app=angular.module("app",[]);

        app.controller("test",function($scope){
            $scope.show=false;
        });

        angular.bootstrap(document,["app"]);

      });
    </script>

  </body>

CSS

.blue-div{
  width:100%;
  height:200px;
  background-color:blue;
}

.green-div{
  width:100%;
  height:200px;
  background-color:green;
}

.animate-show {
  -webkit-transition:all linear 1s;
  transition:all linear 1s;
  opacity:1;
}

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

.animate-show.ng-hide {
  opacity:0;
}

javascript css angularjs ng-animate
person mccainz    schedule 20.03.2014    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Измените свой класс CSS на это:

.animate-show {
  display:block!important;
  -moz-transition:all linear 1s;
  -o-transition:all linear 1s;
  -webkit-transition:all linear 1s;
  transition:all linear 1s;
  opacity:1;
}

http://plnkr.co/edit/SRXY4Xr8ibm6nLkkp9XN?p=preview

по сути, он хочет:

display:block!important;
person SoluableNonagon    schedule 20.03.2014
comment
Вам нужно, чтобы они имели абсолютную позицию, иначе div B будет ниже div A. - person Victor Ivens; 22.12.2014

arrow_upward
8
arrow_downward

Чтобы использовать систему анимации Angular, вам необходимо включить модуль ngAnimate в качестве зависимости в ваше приложение.

Ссылайтесь на angular-animate.js и добавьте модуль:

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

Демо: http://plnkr.co/edit/XLsfJokFEvlKFsTByKt5?p=preview

person tasseKATT    schedule 20.03.2014

arrow_upward
1
arrow_downward

У меня была та же проблема, и я обнаружил, что документация не включает критическую часть, упомянутую tasseKATT.

Я бы предостерег от использования подхода, который был выбран в качестве правильного ответа. Это меняет вещи за пределами того, о чем знает Angular, поэтому это может привести к неправильному поведению.

Поместите код перехода в следующий класс:

.barGraphDiv.ng-hide-add.ng-hide-add-active,
.barGraphDiv.ng-hide-remove.ng-hide-remove-active {
    -webkit-transition: all linear 5s;
    transition: all linear 5s;
}

А затем в своем приложении обязательно внедрите ngAnimate. Это позволяет angular добавить эти классы в ng-show и ng-hide и подождать указанное время в CSS перед их удалением.

person Digant C Kasundra    schedule 24.04.2015