Использование ngAnimate с ng-show/ng-hide

У меня есть этот html:

  <div ng-if="true">
    <div ng-show="hideMe">
      <div class="random" ng-include="'template.html'"></div>
    </div>
  </div>

  <br>
  <button ng-click="hideMe = false">hide</button>
  <button ng-click="hideMe = true">show</button>

И тогда у меня есть этот стиль:

.random.ng-enter {
  transition: 2s ease all;
  opacity: 0;
  transform: translateY(100%);
}

.random.ng-enter.ng-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.random.ng-leave {
  transition: 10s ease all;
  opacity: 1;
  transform: translateX(0);
}

.random.ng-leave.ng-leave-active {
  opacity: 0;
  transform: translateX(50%);
}

Шаблон:

<p>a simple paragraph</p>

<div ng-repeat="user in info">
  {{user.nome}}

</div>

Когда я впервые загружаю страницу, ng-enter-active работает отлично, но когда я использую кнопки Hide или Show, ng-enter и ng-leave не работают. Кто-нибудь знает, что мне не хватает?

Спасибо :)

Здесь у вас есть плункер, показывающий то, что я только что показал.

ДЕМО


css angularjs ng-animate ng-show ng-hide
person N.Car    schedule 18.09.2017    source источник
comment
можно поточнее по вашей проблеме? и хорошо, если вы покажете нам содержимое template.html   -  person Temani Afif    schedule 18.09.2017
comment
Я только что добавил это. Все дело в плунжере. В основном, когда я нажимаю «Скрыть» или «Показать», я хочу, чтобы он принимал конфигурации, которые я установил для ng-leave и ng-enter.   -  person N.Car    schedule 18.09.2017
comment
Не забудьте отметить ответ как правильный, чтобы тема была закрыта ;)   -  person Temani Afif    schedule 18.09.2017

Ответы (1)


arrow_upward
2
arrow_downward

отредактируйте свой html следующим образом:

<div ng-if="true">
    <div ng-if="hideMe" class="random">
      <div  ng-include="'template.html'"></div>
    </div>
  </div>

это должно работать.

Класс random следует использовать с элементом, который показывает/скрывает, и он должен быть с ng-if

person Temani Afif    schedule 18.09.2017
comment
Большое спасибо!! Я не знал, что это должно быть в одном элементе с ng-if - person N.Car; 19.09.2017