Angular: Fading out element and then setting display none

Question

When I click an element, I'd like another element to first fade out, and then be set to display: none.

I have the following code:

Partial:

<div class="main_menu_image" ng-class="{ fadeOut : MenuOpen==true }" /></div>

<div class="button" ng-click="ActivateMenu()"></div>

Then in my controller:

  $scope.MenuOpen = false;

  $scope.ActivateMenu = function(){
    $scope.MenuOpen = $scope.MenuOpen === false ? true: false;
  }

So when I click the button, element main_menu_image gets the class fadeOut. So it now fades out. But after the fading animation completes I would also like to set display to none on main_menu_image so it is completely hidden.

I don't want to resort to jQuery. Is there an Angular approved way of doing this?

Kjell Ivar · Accepted Answer · 2014-04-25 18:55:13Z

1

Yes it's very easy to do:) Like Svein says, you can use ng-show, and you can use ng-hide.

Working fiddle here

This hides things instantly though. But you can for example set a timeout, via the $timeout service, and set your hiding boolean in that way.

You can also use ng-if, this actually removes the element from the DOM if the condition is not met, rather than just setting display:none.

Update: Here's a more proper fiddle showcasing what you're trying to do

edited Apr 25, 2014 at 18:55

answered Apr 25, 2014 at 18:40

Kjell Ivar

1,1648 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SveinT · Accepted Answer · 2014-04-25 18:33:40Z

0

You can use ngShow. If you use the ngAnimate module, you'll have built in support for animations for most built-in Angular directives.

See here for more information: https://docs.angularjs.org/guide/animations

answered Apr 25, 2014 at 18:33

SveinT

7035 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular: Fading out element and then setting display none

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related