ngAnimate on ngShow. Preventing animation when it starts first time

Question

I was playing around with recently added angular.js animations feature, and this doesn't work as desired

<style>
    .myDiv{
        width:400px;
        height:200px;
        background-color:red;
    }
    .fadeIn-setup,.fadeOut-setup {
      -webkit-transition: 1s linear opacity;
      -moz-transition: 1s linear opacity;
      -o-transition: 1s linear opacity;
      transition: 1s linear opacity;
    }
    .fadeIn-setup{
      opacity:0;
    }
    .fadeOut-setup{
      opacity:1;
    }
    .fadeIn-setup.fadeIn-start {
      opacity: 1;
    }
    .fadeOut-setup.fadeOut-start{
        opacity:0;
    }
</style>

<div ng-app>
    <div ng-controller='ctrl'>
       <input type='button' value='click' ng-click='clicked()' />  
       <div ng-show="foo == true"  class='myDiv' ng-animate="{show: 'fadeIn', hide:'fadeOut'}">
       </div>
     </div>
</div>

function ctrl($scope){
    $scope.foo = false;
    $scope.clicked = function(){
       $scope.foo = !($scope.foo);
    }
}

http://jsfiddle.net/Kx4TS/1

it spoils away myDiv on the dom.ready and starts it fading out. Whereas it initially should be hidden. How to fix that?

I figured: for my case it works if you make style of myDiv opacity:0. But it only works if I directly set the style, not through the class. — iLemming, Apr 05 '13 at 20:02
I'm thinking this sort of thing should be done in a directive where you can hide the element initially and fade it in when necessary inside of a `$watch` callback. — Langdon, Apr 06 '13 at 04:32

score 40 · Answer 1 · edited Jul 01 '16 at 15:20

40

This issue still persists even now with 1.2.22. However, one of these solutions solves it very easily.

After trying all the solutions mentioned here I wanted to specifically highlight cocoggu's suggestion to ac360 as it is by far the most concise and it "just works".

As he suggests, simply adding the ng-hide class to the offending element resolves the problem immediately. - It prevents the initial animation glitch and allows all subsequent animations to behave as expected.

Working Solution thanks to cocoggu

<div id="offending-element" class="ng-hide"></div>

edited Jul 01 '16 at 15:20

Vasseurth

6,354
12
53
81

answered Aug 29 '14 at 06:00

TheLostBrain

651
7
9

Works well with angular 1.3.10 :) – Timothée Jeannin Feb 27 '15 at 09:57

score 10 · Answer 2 · answered Apr 07 '13 at 19:00

I have found 2 different solutions for your problem

The easiest solution: Add a inline style to the div style="display:none"

The other solution is to add an initial class to the div with ng-class="state" and reset the class when the button is clicked

function ctrl($scope){
    $scope.state = 'hide';
    $scope.foo = false;
    $scope.clicked = function() {
       $scope.state = undefined;  
       $scope.foo = !($scope.foo);
    }
}

together with the following css:

.hide {
    display: none;
}

I think I would use the first and most simple solution

`style="display:none"` worked for me (whereas `class="ng-hide"` did not). Running v1.5.6 — Trevor, Jun 16 '16 at 23:13

Hinrich · Answer 3 · 2015-05-21T22:37:21.357

0

this should do the trick:

<div ng-class="ng-hide" ng-show="foo == true"  class='myDiv'">

this is the important part here: ng-class="ng-hide"

EDIT: As pointed out in the comments, the above would not work. It should look like this:

<div class="ng-hide" ng-show="foo == true"  class='myDiv'">

edited May 21 '15 at 22:37

answered Mar 30 '15 at 12:31

Hinrich

13,485
7
43
66

@codeepic: what exactly does not work? could you please clarify? thx – Hinrich May 19 '15 at 06:49
2

Adding ng-class='ng-hide'. You want the ng-hide class to be applied before the Angular application starts, to prevent the flicker. You are better off setting class="ng-hide" on the element you want to be initially hidden. CSS is parsed before the JS, so in this case ng-hide class is applied before Angular app is initialized and the element is initially hidden without the annoying flicker. – codeepic May 20 '15 at 07:15

score -1 · Accepted Answer · answered May 27 '13 at 02:29

-1

This has been fixed now. Upgrade to 1.1.5.

answered May 27 '13 at 02:29

matsko

21,895
21
102
144

4

This still persists in 1.1.5 – John Wheeler Aug 14 '13 at 07:01
I think they fixed it related with page load, see e.g. http://www.yearofmoo.com/2013/04/animation-in-angularjs.html: "Version 1.1.5 of AngularJS now properly avoids animating elements that are instantiated before bootstrap. So basically the first animation is skipped thus preventing any flickr or premature hiding." -- but it seems to still happen when loading fragments. The solution with `style=display:none` works for me in this case. – User Aug 31 '13 at 17:26
24

@ac360 you can add a ng-hide class on the element manually to hide it on init – cocoggu Jul 17 '14 at 10:15

ngAnimate on ngShow. Preventing animation when it starts first time

4 Answers4

Linked

Related