Анимированные гибкие переходы - PullRequest
Новая
       18

Анимированные гибкие переходы

0 голосов
/ 25 апреля 2018

Так что я не верю, что на это ответили в другом месте. Я просматривал трюки CSS, а также http://n12v.com/css-transition-to-from-auto/, но не уверен, возможно ли следующее.

То, что я хочу сделать, это анимировать дочернего элемента flex, если он меняет ширину. Это изменение ширины может быть вызвано самим ребенком. Вот пример кода: 

.container {
  width: 600px;
  display: flex;
}

.flexy {
  transition: all 10s;
  max-width: 500px;
}
<div class="container">
  <div class="flexy" style="background-color:red;">This is some random text</div>
  <div class="flexy" style="background-color:green;">
    <div style="width:300px">Resize this to animate?</div>
  </div>
  <div class="flexy" style="background-color:blue;">This is some more random text</div>
</div>

Так что я хочу, чтобы flexy-боксы анимировались до их размеров и , что наиболее важно, если (скажем, firebug) вы измените ширину 300px на 500px, я бы хотел родителя flexy (из div 300px) оживить тоже. Это вообще возможно?

1 Ответ

0 голосов
/ 25 апреля 2018

Если я правильно понимаю, вы хотите, чтобы зеленый div оживлял изменение "ширины".

Как вы говорите, вы не можете анинировать в / из auto, но вы можете анимировать из одного определенного значения в другое.

В этом случае мы можем воспользоваться flex-basis вместо width

.container {
  width: 600px;
  display: flex;
  margin: 1em auto;
}

.container>div {
  transition: all 2s;
}

.flexy {
  transition: all 2s;
  flex: 0 0 300px;
  background: green;
}

.flexy:hover {
  flex: 0 0 500px;
}
<div class="container">
  <div class="" style="background-color:red;">This is some random text</div>
  <div class="flexy">
    <div style="">Resize this to animate?</div>
  </div>
  <div class="" style="background-color:blue;">This is some more random text</div>
</div>
...