нг-шоу с CSS фейдером не работает - PullRequest
Новая
       2

нг-шоу с CSS фейдером не работает

0 голосов
/ 31 мая 2018

Я пытаюсь реализовать второе решение, найденное здесь , чтобы заставить текст исчезать на ng-show.Мой HTML-код: 

<input ng-focus="hasFocus = true" ng-blur="hasFocus = false"
       type="text" placeholder="Click to fade"/>
<p ng-show="hasFocus" class="fader">Fade me</p>

Мой CSS-код: 

.fader.ng-show {
    transition: all linear 500ms;
    opacity: 1;
}

.fader.ng-hide {
    transition: all linear 500ms;
    opacity: 0;
}

, а мой Angular: 

var myApp = angular.module('myApp', []);

JSFiddle здесь .

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Наборы классов ng-hide display: none!important.

Переопределить его с помощью display: block!important;

DEMO 

.fader{
    transition: all linear 500ms;
    opacity: 1;
}

.fader.ng-hide {
    display: block!important;
    transition: all linear 500ms;
    opacity: 0;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
   <button ng-click="hasFocus=!hasFocus">
      Click me
   </button>
   <p ng-show="hasFocus" class="fader">Fade me</p>
</body>
0 голосов
/ 31 мая 2018

Я только что сделал то, что вы ищете, но я никогда не использую ngAnimate в угловом формате, поэтому я взял пример кода из вашей ссылки на вопрос stackoverflow и добавил классы fader.ng-hide-remove и add. Теперь все работает нормально, надеюсь, этоудовлетворит ваше состояние.

var myApp = angular.module('myApp', ['ngAnimate']);
.fader.ng-hide {
    opacity: 0;
}

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

.fader.ng-hide-remove {
  transition: all linear 1000ms;
}

.fader.ng-hide-add {
  transition: all linear 500ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<div ng-app="myApp">
<input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text" placeholder="Click to fade"/>
<p ng-show="hasFocus" class="fader">Fade me</p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...