Question

我有一个div，其中包含一个图像，并设置为随着过渡而扩展。下面的代码

// HTML

<dic class="header">
    <div class="container">
        <img src="/images/logo.png">
    </div>
</div>

//CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .logo {
        display: inline-block;
        width: 360px;
        height: 100px;
        transition: all .5s;
    }
}

.header .logo.expanded {
    width: 100%
}

当我添加类并且容器扩展时，div的中心会不断重新计算，并且图像从左到右快速摆动。如何保持图像稳定？

编辑：添加了更多代码

编辑2：

JsFiddle位于https://jsfiddle.net/349zcvkw/25/，但该问题似乎并未出现在小提琴中。在我的项目中，徽标从左到右以相同的精确代码摆动

更新：

我解决了这一问题，方法是在后面使用一个单独的div来创建展开的背景。谢谢大家的建议。

Answer 1

如果您同时触发了许多动画，则您的cpu可能无法处理所有动画，并且您可能会遇到轻微的动画滞后（这就是为什么会出现摆动的原因）。您可以做两件事做

通过延迟或删除动画来优化代码
提升您的cpu

正如您在下面看到的那样，在没有进行任何其他操作的情况下，动画似乎可以正常工作：

function toggleClass() {
  $('.container').toggleClass('expanded');
}

.container {
  display: inline-block;
  width: 360px;
  height: 100px;
  text-align: center;
  transition: all .5s;
}

.expanded {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="https://appendto.com/wp-content/uploads/2016/05/css3-420x210.jpg">
</div>

<div class="expanded">
  <button onclick="toggleClass()">Toggle Class</button>
</div>

Answer 2

将flex添加到您的flex中：）

function toggleClass() {
    document.querySelector('.header .logo_container').classList.toggle('expanded');
    setTimeout(toggleClass, 3000);
}

setTimeout(toggleClass, 500);

.header {
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: red;
}

.header .logo_container {
  width: 360px;
  height: 100px;
  transition: width .5s;
  background-color: blue;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  color: #FFF;
}

.header .logo_container.expanded {
  width: 100%;
}

<div class="header">
  <div class="logo_container">
    <img src="https://via.placeholder.com/50x50"> Some Text
  </div>
</div>

Answer 3

可能有两个选择：

将图像设置为块状

.container img { display: block; margin: 0 auto; }

将图像设置为嵌入式块。那应该使用text-align：在容器类中居中的位置

.container img { display: inline-block; }

如何在扩展的div中保持居中的图像稳定

3 个答案: