2 Вопрос: CSS-анимация: элементы в строках, выходящие за пределы контейнера с увеличивающимися полями

вопрос создан в Thu, May 2, 2019 12:00 AM

Я хочу, чтобы элементы, которые помещаются вместе, взрываются друг от друга, увеличивая поле для каждого из них с помощью 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>
    
0
2 ответа                              2                         

Считайте, что строка является элементом 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>
    
2
2019-05-02 14: 46: 42Z
  1. Это хорошо, но элементы теперь давят на верх контейнера. Можете ли вы сделать так, чтобы черные квадраты просто равномерно выдвигались наружу?
    2019-05-02 15: 07: 37Z
  2. @ RobKwasowski, какой браузер вы используете?
    2019-05-02 15: 08: 54Z
  3. Я использую Chrome
    2019-05-02 15: 09: 13Z
  4. @ RobKwasowski Я думаю, я не уверен, что именно вы хотите. Вы можете сделать небольшой макет до и после?
    2019-05-02 15: 10: 46Z
  5. Если вы посмотрите на этот анимированный GIF-файл, вы увидите, что в вашем примере в конце все оказывается вниз. Я хочу, чтобы квадраты просто двигались наружу от центра. imgur.com/a/hya2qlE
    2019-05-02 15: 18: 56Z

Ответ Темани Афифа отлично работает на 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>
    
0
2019-05-03 00: 06: 52Z
источник размещен Вот