Question

这是我正在开发的项目。

转到产品。

点击/切换冲洗坐骑和按书籍

观察下面的图像淡入和淡出。正如您所看到的，第一张图像很好地淡出，但第二张图像立即弹出。如何使它们既平滑又美观？

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

Answer 1

最好使用Angular最重要的功能，使用ng-view并将两个视图分成两个部分....当＆＃34; Flush Mounts＆＃34;点击刷新坐骑div平滑淡入，当你点击＆＃34;按书籍＆＃34;新闻书也顺利淡出。 ng-view示例：http://jsfiddle.net/carpasse/mcVfK/3/

   <ng-view>
   </ng-view>

Answer 2

部分问题在于你总能看到＆＃34; Flush Mounts＆＃34; （在顶部），淡入或淡出。淡出需要两倍的时间。我认为这与Angular的动画制作过程以及动画在一个循环中运行的事实有关。

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

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

在节目和隐藏中使淡出淡出淡出

2 个答案: