CODEWITHSUNDEEP
javascriptcssangularjs
taurus
taurus

Reputation: 490

ng-show with CSS fader not working

I'm trying to implement the second solution found here to get text to fade up on ng-show. My HTML is:

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

My CSS is:

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

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

and my Angular is:

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

A JSFiddle is here.

Upvotes: 0

Views: 61

Answers (2)

georgeawg
georgeawg

Reputation: 48968

The ng-hide class sets display: none!important.

Override with it with display: block!important;

The 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>

Upvotes: 1

Nishant Dixit
Nishant Dixit

Reputation: 5522

I just did same which you are looking but I never use ngAnimate in angular so I took sample code from your reference link of stackoverflow question and add fader.ng-hide-remove and add class now It is working fine, Hope this will satisfy your condition. 

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>

Upvotes: 1

Related Questions