JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 什么是ng-hide-add,ng-hide-active大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我动画了一个div.它具有以下定义:
<div ng-show="showTranslations" ng-swipe-right="showTranslationsBlock=false">...</div>

我有以下css定义:

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 tutorial.动画作品.但:

>为什么我需要这些类.ng-hide-add和.ng-hide-remove?
>为什么我看不到他们添加到div的类?
>为什么还有类ng-hide-add-active和ng-hide-remove-active?
>为什么在div变得可见时没有转换,但是我添加了以下css规则:

div.ng-hide-remove {
不透明度:1;
}

updatE

>从谷歌教程提供的表中可以看到,这些类被添加到触发动画框架(这会执行回流).我的理解正确吗?为什么在这里提到动画框?
>我试图增加过渡期,但没有添加类.我没有看到类添加ng-hide-add-active和ng-hide-remove-active.
>从表中可以看出,这些是触发转换的类?

updatE1
我已经探讨了Angular的源代码,并为ng-hide指令找到以下内容:

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');
    });
  };
}];

据了解,ng-hide类是通过动画服务添加的.但是如果我不使用动画和$动画服务是不可用的会发生什么?鉴于上述代码,Angular将如何处理这种情况,以及如何添加隐藏类?还是这个$animate.addClass()只是添加一个回调给addClass事件?

解决方法

将CSS转换放在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;
}

同样,对于ng-hide-add和ng-hide-add-active:

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


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

大佬总结

以上是大佬教程为你收集整理的javascript – 什么是ng-hide-add,ng-hide-active全部内容,希望文章能够帮你解决javascript – 什么是ng-hide-add,ng-hide-active所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。