Issue with CSS transition not displaying ng-show elements properly

Question

Issue with CSS transition not displaying ng-show elements properly

I'm currently working on incorporating a fade-in effect for text using the second solution from this source when using ng-show. Here is my HTML setup:

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

This is how my CSS looks like:

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

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

Additionally, this is what my Angular code consists of:

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

You can also view a demonstration on JSFiddle here.

javascript css angularjs

Answer 1

Answer №1

I recently accomplished the same task that you are attempting, although I did not utilize ngAnimate in Angular. Instead, I referenced a code snippet from a stackoverflow post and incorporated the classes fader.ng-hide-remove and add. This adjustment resulted in the functionality working smoothly. Hopefully, this solution meets your requirements.

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>

Answer 2

I recently accomplished the same task that you are attempting, although I did not utilize ngAnimate in Angular. Instead, I referenced a code snippet from a stackoverflow post and incorporated the classes fader.ng-hide-remove and add. This adjustment resulted in the functionality working smoothly. Hopefully, this solution meets your requirements.

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>

Answer 3

Answer №2

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

To override it, use display: block!important;

Check out the demonstration below:

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

Answer 4

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

To override it, use display: block!important;

Check out the demonstration below:

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

Issue with CSS transition not displaying ng-show elements properly

Answer №1

Answer №2

Check out the demonstration below:

Similar questions

I recently installed Bootstrap 5 and jQuery 3.6 on my website, but I'm encountering an issue where the dropdown button is not functioning properly when I try to embed them. Could there be

What could be the reason for Sequelize's findAll() method returning only a single object?

What is the predefined value for a multi-select generated by the ng-for directive in Angular?

Validation of textfields using React.js

Deciphering the Essence of Promise Sequences

Troubleshooting: Images not displaying on webpage due to Ajax, JQuery, and JavaScript integration

Encountering an error in Vue.js where a "cannot read property of undefined" message is displayed when attempting to use v

What is the best way to showcase the output of a Perl script on a webpage

Struggling to position an image and text side by side within a div using CSS

Tips for ensuring your background image is fully displayed and covers the entire size

Error: Next.js is throwing a SyntaxError due to encountering an unexpected token 'export'

Experiencing issues while trying to publish on Cloudflare Workers?

I’m keen on utilizing JQuery with Node.js and EJS, but I’m encountering an issue where $ is not

The code generated by Asto SSR may not be compatible with older iOS versions, causing it to fail to run

Execute function prior to redirection of iframe

Struggling to configure an onClick handler in Next.js

What is the best way to apply the :nth-child() selector to target every second <div> element within ALL child elements?

Issues with displaying ngAnimate animations

Is there a way to automatically play videos without any audio?

Creating a Delicious Earth Progress Pie