Angular 1.2.x переход ng-hide и ng-show css

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

<div class="row reveal-animation" ng-show="partneradd.showEntitlements">
  <div class="col-md-6">
    <fieldset>
      <legend>Entitlements</legend>
      stuff
    </fieldset>
  </div>
</div>

Где значение ng-show является логическим значением, которое переключается на true с помощью кнопки на странице. Это прекрасно работает. Но без перехода.

Следуя некоторому коду, найденному на сайте angular, я использую это в своем sass:

.reveal-animation.ng-enter {
  -webkit-transition: 2s linear all;
   transition: 2s linear all;
   opacity: 0;
 }

.reveal-animation.ng-enter.ng-enter-active {
  opacity: 1;
}

Но ничего. Что я здесь сделал не так?

Изменить: я действительно загрузил модуль ng-animate и ввел его в свой app.js.


javascript css angularjs ng-animate
person Steve    schedule 23.02.2015    source источник
comment
Возможно, я не понимаю, как работает Angular, но я не вижу в вашей разметке классов .ng-enter или .ng-enter-active.   -  person TylerH    schedule 23.02.2015
comment
Служба анимации автоматически применит два класса CSS к анимированному элементу, и эти два класса CSS предназначены для содержания начального и конечного стилей CSS. Поддерживаются как переходы CSS, так и анимация ключевых кадров, и их можно использовать для игры с этой структурой именования. из code.angularjs.org/1.2.28/docs/api/ngAnimate   -  person Steve    schedule 23.02.2015

Ответы (2)


arrow_upward
0
arrow_downward

надеюсь, это поможет вам, вы можете просто добавить класс, чтобы скрыть и показать, как здесь, по щелчку

<div class="row reveal-animation" 
ng-class="{'foo':!partneradd.showEntitlements }" ng-show="partneradd.showEntitlements">

Простой пример:

angular.module('myApp',[])
  .controller('ctrl', function ($scope){
    $scope.bar = false;
    $scope.clicked = function(){
       $scope.bar = !($scope.bar);
    }
  });
.myDiv{
    width:400px;
    height:200px;
    background-color:red;
   -webkit-transition: 1s linear;
    /*to only change opacity*/
    /*-webkit-transition: opacity 1s linear*/
   -moz-transition: 1s linear;
   -o-transition: 1s linear;
   transition: 1s linear;
   opacity: 1;
}

.foo{
    background-color: blue;
    opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp">
     <div ng-controller='ctrl'>
        <button ng-click='clicked()'>Click me to change class</button>  
        <div ng-class="{foo: bar}"  class='myDiv'>
        </div>
    </div>
</div>

person A.B    schedule 23.02.2015
comment
Это сработает, но все, что я читал, говорит, что в этом нет необходимости, что модуль ng-animate обрабатывает это назначение класса. Разве это не так? - person Steve; 23.02.2015
comment
Кроме того, в моем случае мне нужно подключиться к существующему событию show/hide и css, который angular использует для скрытия и отображения вещей. - person Steve; 23.02.2015

arrow_upward
0
arrow_downward

ng-show работает с классом ng-hide (посмотрите здесь для получения дополнительной информации и поддерживаемых классов):

.reveal-animation {
  -webkit-transition: 1s all linear;
   transition:all linear 1s;
   opacity:1;
 }

.reveal-animation.ng-hide {
  opacity: 0;
}
person eladcon    schedule 23.02.2015