启用NG-显示的动画渐变，但是，隐藏禁用动画 [英] Enable fade animation on ng-show but disable animation on hide

问题描述

所以，我希望动画时NG-节目是真实的才适用。我有一个困难时期试图禁用淡出的效果。在jQuery中这简直是.hide $和$没有.fadeOut。如何在角达到这个目标？

http://jsfiddle.net/7twjd3an/2/

CSS

  .fadeIn {
  -webkit-过渡：所有线性0.25秒;
  过渡：所有线性0.25秒;
}.fadeIn.ng隐藏{
  不透明度：0;
}.fadeIn.ng秀{
    不透明度：1;
}
 

解决方案

您可以为 .ng出现添加不同的过渡和 .ng-隐藏

添加以下内容 .ng隐藏时，隐藏的元素，同时保留现有的过渡方式，当你显示元素将消除过渡方式：

  .ng隐藏{
    不透明度：0;
    过渡：无0;
}
 

So, I want the animation to only apply when ng-show is true. I'm having a hard time trying to disable a "fade out" effect. In jQuery this is simply $.hide and not $.fadeOut. How do I achieve this in Angular?

http://jsfiddle.net/7twjd3an/2/

CSS

.fadeIn {
  -webkit-transition:all linear 0.25s;
  transition:all linear 0.25s;
}

.fadeIn.ng-hide {
  opacity:0;
}

.fadeIn.ng-show {
    opacity: 1;
}

解决方案

You can add different transitions for .ng-show and .ng-hide

Adding the following to .ng-hide would remove the transition styles when you hide the element while retaining the existing transition styles when you show the element:

.ng-hide {
    opacity: 0;
    transition: none 0;
}

这篇关于启用NG-显示的动画渐变，但是，隐藏禁用动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！