因为某些原因,css不能在display:none和display:block之间进行动画,并且也不能在height:0和height:auto之间进行动画。
所以在任何transition中设置display:none都会破坏效果。

这里说一种小技巧来模拟display:none的效果。
先创建外层div。这个是动画容器。对display效果的模拟也依靠他来实现。

<div class="transition">
    <!--Container-->
    <div>
    </div>
</div>
<style>
.transition{
    opacity: 1;
    visibility: visible;
    transition: all 0.4s ease-in-out;
    width: 32px;
    height: 20px;
}
</style>

添加动画效果生效的类名为active。

<style>
.transition.active{
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}
</style>

设置height,width等盒模型属性为0。
这是一种比较奇葩的技巧,简单说就是将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素,算是一种奇技淫巧。

这样在文档流上,transition就没有任何占位了,相当于实现了display:none的效果。

分类: 前端

0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注