Css animation 与 float 、flex 布局问题

佚名 6年前 (2019-04-14) 随笔 1896人围观抢沙发百度已收录

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

1、有这样一段css html 代码　　

<div class="container">
    <div class="float-left">Biaoti</div>
    <div class="bar">
         <div class="float-left xs-3">1</div>
         <div class="float-left xs-3">2</div>
         <div class="float-left xs-3">3</div>
        <div class="float-left  xs-1">4</div>
    </div>
</div>

就是stack 图这种。

　　1 2 3 4 5

如果我想加上动画，看起来肯定很棒，但是加上动画时，发现有问题。

1 2 3 4 5

看到了吗，这就是，就是浮动的元素在加载动画的时候，会错位，用户体验不好.如何解决这种问题呢。

浮动导致的会脱离文档流,

如何结决布局的这个问题呢，答案是使用flex 布局。

1 2 3 4 5

完美解决。