在 ng show 和 hide 上使淡入淡出更平滑答案

【问题标题】：make fade in fade out smoother on ng show and hide在 ng show 和 hide 上使淡入淡出更平滑
【发布时间】：2014-10-25 10:28:30
【问题描述】：

这是我正在开发的项目。

Test Project Link

转到产品。

单击/切换 嵌入式安装 和 Press Books

观察下面淡入淡出的图像。如您所见，第一张图像很好地淡出，但第二张图像立即弹出。如何让它们既平滑又漂亮地褪色？

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;
    }
}

【问题讨论】：

标签： html css angularjs sass ng-animate

【解决方案1】：

最好使用 Angular 最重要的功能，使用 ng-view 并将两个视图分成两个部分....当单击“Flush Mounts”时，flush mounts div 平滑淡入，当您单击“Press Books”时" press books div 也顺利淡入。 ng-view 示例：http://jsfiddle.net/carpasse/mcVfK/3/

   <ng-view>
   </ng-view>

【讨论】：

【解决方案2】：

问题的一部分是您总是看到“嵌入式安装”（在顶部），要么淡入要么淡出。淡出需要两倍的时间。我认为这与 Angular 的动画过程以及动画在一个周期中运行这一事实有关。

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

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

【讨论】：