淡入淡出显示和隐藏
问题描述:
这里是我正在开发的项目。淡入淡出显示和隐藏
转到产品。
点击/切换冲洗坐骑和出版社的图书
遵守以下衰落和退房的图像。正如你所看到的,第一个图像很好地淡出,但第二个图像立即弹出。如何让他们都淡化顺利和很好?
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;
}
}
答
这是更好地使用角最重要的特点,采用NG-视图和两种观点分成两个谐音... 。点击“冲洗安装”时,冲洗安装盘会顺利淡入,当您点击“冲压书籍”时,冲压书籍分区也会顺利淡入。 NG-查看示例:问题的http://jsfiddle.net/carpasse/mcVfK/3/
<ng-view>
</ng-view>
答
的是,你总是看到“刷新坐骑”(顶部),在任何褪色或淡出。淡出需要两倍的时间。我认为这与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
上。