淡入淡出显示和隐藏

转到产品。

点击/切换冲洗坐骑和出版社的图书

遵守以下衰落和退房的图像。正如你所看到的，第一个图像很好地淡出，但第二个图像立即弹出。如何让他们都淡化顺利和很好？

HTML：

<div class="text-center font-zero"> 
    <a class="category" ng-class="{active: flushMount}" ng-click="flushMount = true" ng-init="flushMount = true"> 
     Flush Mounts 
    </a> 
    <a class="category" ng-class="{active: !flushMount}" ng-click="flushMount = false"> 
     Press Books 
    </a> 
</div> 
<div class="container"> 
    <div class="book-markers text-center"> 
     <div class="book-item" ng-show="flushMount"> 
      ... 
     </div> 
     <div class="book-item" ng-hide="flushMount"> 
      ... 
     </div> 
    </div> 
</div>

SCSS

.book-item{ 
    @include transition(all 0.5s ease); 
    opacity: 1; 

    &.ng-hide-add, 
    &.ng-hide-remove{ 
     display: inline-block !important; 
    } 

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

来源

2014-09-01 Adrian Enriquez

这是更好地使用角最重要的特点，采用NG-视图和两种观点分成两个谐音... 。点击“冲洗安装”时，冲洗安装盘会顺利淡入，当您点击“冲压书籍”时，冲压书籍分区也会顺利淡入。 NG-查看示例：问题的http://jsfiddle.net/carpasse/mcVfK/3/

<ng-view> 
    </ng-view>

来源

2014-09-01 09:23:43

的是，你总是看到“刷新坐骑”（顶部），在任何褪色或淡出。淡出需要两倍的时间。我认为这与Angular的动画过程和动画在一个循环中运行的事实有关。

您已在您的基类中定义了transition，并且ng-hide-add/remove定义了display: inline-block;。动画过程首先添加添加和删除类。在你的情况下，这已经增加了一个转换display: none -> inline-block。然后添加ng-hide，这增加了另一个转换opacity: 1 -> 0。另一方面，淡入只有一个过渡。

我不完全确定它是谁的错。我建议你首先将div放在z-index而不是y坐标的上方。无论如何，你应该这样做。然后，您可以将转换放置在隐藏类（或.book-item.ng-hide）上，而不是直接在book-item上。

来源

2014-09-01 13:44:23 zeroflagL

淡入淡出显示和隐藏

回答

相关问题