javascript - what is ng-hide-add, ng-hide-active - Stack Overflow

admin管理员组

文章数量:1225484

I'm animating a div. It has the following definition:

<div ng-show="showTranslations" ng-swipe-right="showTranslationsBlock=false">...</div>

I have the following css defined:

div.ng-hide {
    transition: 0.5s linear opacity;
    opacity: 0;
}

div.ng-hide-add, 
div.ng-hide-remove {
    /* this needs to be here to make it visible during the animation
       since the .ng-hide class is already on the element rendering
       it as hidden. */
    display:block!important;
}

This is taken from this tutorial. The animation works. But:

1. Why do I need these classes .ng-hide-add and .ng-hide-remove?
2. Why I don't see them added to div's classes?
3. Why there are also classes ng-hide-add-active and ng-hide-remove-active?

4. Why there is no transition when the div becomes visible although I've added the following css rule:

   div.ng-hide-remove { opacity: 1; }

UPDATE

1. As I can see from the table provided by google's tutorial these classes are added to trigger animation frame (this performs a reflow). Is my understanding correct? Why is animation frame is mentioned there?
2. I tried to increase the transition period but it didn't add the classes. I didn't see the classes ng-hide-add-active and ng-hide-remove-active added either.
3. As I understand from the table these are the classes that trigger transition?

UPDATE1
I've explored the Angular's source code and found the following for the ng-hide directive:

var ngHideDirective = ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngHide, function ngHideWatchAction(value){
      $animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'ng-hide');
    });
  };
}];

As I understand the ng-hide class is added through animation service. But what happens if I don't use animations and $animate service is not available? How Angular is going to handle this situation given the code above and how it is going to add ng-hide class? Or is this $animate.addClass() simply adds a callback to addClass event?

I'm animating a div. It has the following definition:

<div ng-show="showTranslations" ng-swipe-right="showTranslationsBlock=false">...</div>

I have the following css defined:

div.ng-hide {
    transition: 0.5s linear opacity;
    opacity: 0;
}

div.ng-hide-add, 
div.ng-hide-remove {
    /* this needs to be here to make it visible during the animation
       since the .ng-hide class is already on the element rendering
       it as hidden. */
    display:block!important;
}

This is taken from this tutorial. The animation works. But:

1. Why do I need these classes .ng-hide-add and .ng-hide-remove?
2. Why I don't see them added to div's classes?
3. Why there are also classes ng-hide-add-active and ng-hide-remove-active?

4. Why there is no transition when the div becomes visible although I've added the following css rule:

   div.ng-hide-remove { opacity: 1; }

UPDATE

1. As I can see from the table provided by google's tutorial these classes are added to trigger animation frame (this performs a reflow). Is my understanding correct? Why is animation frame is mentioned there?
2. I tried to increase the transition period but it didn't add the classes. I didn't see the classes ng-hide-add-active and ng-hide-remove-active added either.
3. As I understand from the table these are the classes that trigger transition?

UPDATE1
I've explored the Angular's source code and found the following for the ng-hide directive:

var ngHideDirective = ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngHide, function ngHideWatchAction(value){
      $animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'ng-hide');
    });
  };
}];

As I understand the ng-hide class is added through animation service. But what happens if I don't use animations and $animate service is not available? How Angular is going to handle this situation given the code above and how it is going to add ng-hide class? Or is this $animate.addClass() simply adds a callback to addClass event?

• javascript
• angularjs

Share Improve this question Follow edited Jul 30, 2014 at 17:06 Max Koretskyi asked Jul 28, 2014 at 14:13 Max KoretskyiMax Koretskyi 105k6767 gold badges353353 silver badges515515 bronze badges 4

• could you please provide any fiddle? – Vilas Kumkar Commented Jul 28, 2014 at 14:19
• 1 1. They are intended to be used with CSS transitions. 2. Just increase your transition period, you will see them: transition: 10s linear opacity; 3. I don't believe the tutorial is showing how the css classes were intended to be used with animations. 4. Apply the CSS animations as intended: docs.angularjs.org/api/ng/directive/ngHide – Michael Kang Commented Jul 28, 2014 at 14:29
• 1 did you include ngAnimate as a dependency: app.module('app', ['ngAnimate']); Angular will not add the CSS classes otherwise. – Michael Kang Commented Jul 29, 2014 at 19:05
• @pixelbits, yes, I included it as a dependency and there are no errors in console. – Max Koretskyi Commented Jul 30, 2014 at 9:46

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 17

Put your CSS transition on ng-hide-remove, ng-hide-remove-active:

div.ng-hide-remove {
    transition: 0.5s linear opacity;
    opacity: 0;
}


div.ng-hide-remove-active {
    opacity: 1;
}

Similarly, for ng-hide-add and ng-hide-add-active:

div.ng-hide-add {
    transition: 0.5s linear opacity;
    opacity: 1;
}


div.ng-hide-add-active {
    opacity: 0;
}

本文标签： javascriptwhat is nghideaddnghideactiveStack Overflow