Question

我想通过CSS动画通过增加每个元素的边距来使放置在一起的元素相互爆炸。我的问题是，它们最终将容器推向容器的左侧而不是从容器的外部移出，并且最终彼此堆叠。有什么方法可以使它们向外扩展？您可以在此示例中看到我到目前为止所做的事情。

function ct(tag, id, attrs) {
  var e = document.createElement(tag)
  if (typeof id == 'object') attrs=id
  if (typeof id == 'string') e.setAttribute('id', id)
  for (var a in attrs)
    if (attrs[a] !== undefined)
      e.setAttribute(a, attrs[a])
  return e
}

for (var i = 0; i < 3; i++) {
  $('#page').append(ct('div', {'class': 'row_'}))
  for (var y = 0; y < 3; y++) {
    $('.row_').eq(i).append(ct('div', {'class': 'abc'}))
  }
}

$('#start').click(function() {
  $('.abc').addClass('move')
})

#page {
  height: 160px;
  width: 200px;
  background: lightgrey;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.abc {
  margin: 1px;
  padding: 10px;
  background: black;
  width: 30px;
  display: inline-block;
}

.move {
  animation: move 0.6s cubic-bezier(1, 0, 1, 1);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes move {
  from {
    margin: 1px;
  }
  to {
    margin: 10px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div id=page>
  </div>
  <button id=start>
    Start
  </button>
</body>

</html>

Answer 1

将行设置为inline-flex元素以适合包括边距在内的内容的宽度，并且由于默认行为是nowrap，因此您将遇到想要的溢出。然后像垂直放置一样将所有内容水平居中：

function ct(tag, id, attrs) {
  var e = document.createElement(tag)
  if (typeof id == 'object') attrs=id
  if (typeof id == 'string') e.setAttribute('id', id)
  for (var a in attrs)
    if (attrs[a] !== undefined)
      e.setAttribute(a, attrs[a])
  return e
}

for (var i = 0; i < 3; i++) {
  $('#page').append(ct('div', {'class': 'row_'}))
  for (var y = 0; y < 3; y++) {
    $('.row_').eq(i).append(ct('div', {'class': 'abc'}))
  }
}

$('#start').click(function() {
  $('.abc').addClass('move')
})

#page {
  height: 160px;
  width: 200px;
  background: lightgrey;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items:center; /* added this */
}
.row_ {
 display:inline-flex; /* added this */
}
.abc {
  margin: 1px;
  padding: 10px;
  background: black;
  width: 30px;
  /*display: inline-block; no more needed*/
}

.move {
  animation: move 0.6s cubic-bezier(1, 0, 1, 1);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes move {
  from {
    margin: 1px;
  }
  to {
    margin: 30px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div id=page>
  </div>
  <button id=start>
    Start
  </button>
</body>

</html>

Answer 2

Temani Afif的答案在Firefox和最新版本的Chrome上效果很好，但是在旧版的Chrome flexbox上无法完全正常工作。因此，我发现您还必须在行容器上设置min-height的动画，以实现更好的兼容性。

function ct(tag, id, attrs) {
  var e = document.createElement(tag)
  if (typeof id == 'object') attrs=id
  if (typeof id == 'string') e.setAttribute('id', id)
  for (var a in attrs)
    if (attrs[a] !== undefined)
      e.setAttribute(a, attrs[a])
  return e
}

for (var i = 0; i < 3; i++) {
  $('#page').append(ct('div', {'class': 'row_'}))
  for (var y = 0; y < 3; y++) {
    $('.row_').eq(i).append(ct('div', {'class': 'abc'}))
  }
}

$('#start').click(function() {
  $('.abc').addClass('move')
  $('.row_').addClass('test')
})

#page {
  height: 160px;
  width: 200px;
  background: lightgrey;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center; /* added this */
}

.row_ {
 display: inline-flex; /* added this */
}

.abc {
  margin: 1px;
  padding: 10px;
  background: black;
  width: 30px;

  /* display: inline-block; no more needed */
}

.move {
  animation: mover 0.6s cubic-bezier(1, 0, 1, 1);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes mover {
  from {
    margin: 1px;
  }

  to {
    margin: 40px;
  }
}

.test {
  animation: tester 0.6s cubic-bezier(1, 0, 1, 1);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes tester {
  from {
    min-height: 22px;
  }

  to {
    min-height: 100px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div id=page>
  </div>
  <button id=start>
    Start
  </button>
</body>

</html>

CSS动画：行中的元素以增加的边距移出容器

2 个答案: