Можно ли анимировать изменения в сетке-шаблоне-столбцах с помощью переходов? - PullRequest
Новая
       8

Можно ли анимировать изменения в сетке-шаблоне-столбцах с помощью переходов?

0 голосов
/ 20 октября 2018

Я использую сетки CSS и пытаюсь получить плавное закрытие (ширина = 0) столбца, когда экран становится меньше. 

.red {
  grid-area: red;
  background-color: #e00025;
}

.green {
  grid-area: green;
  background-color: #bdf681;
}
.blue {
  grid-area: blue;
  background-color: #d3e1f6;
}
.animate {
  transition: all 0.5s ease-in-out;
}
.xWrapper {
  display:grid;
  width:100vw;
  height:calc(100vh - 10px);
  grid-gap:1em;
  grid-template-rows:1fr;
  grid-template-columns:1fr 2fr 1fr;
  grid-template-areas:
          "red green blue";
}

@media screen and (max-width:700px) {
  .xWrapper {
    grid-template-columns:0 2fr 1fr;
    grid-template-areas:
        "red green blue";
  }
  .red {
    width:0;
    overflow:hidden;
  }
}
<div class="xWrapper animate">
  <div class="red">
      Red. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur
      cursus velit, sed cursus erat. Integer scelerisque odio a consectetur laoreet.
      Nam at ante ultricies, volutpat risus vitae, interdum risus.
  </div>

  <div class="green">
      Green. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur
      cursus velit, sed cursus erat. Integer scelerisque odio a consectetur laoreet.
      Nam at ante ultricies, volutpat risus vitae, interdum risus. Suspendisse
      sollicitudin odio a felis ornare, nec elementum velit convallis.
  </div>

  <div class="blue">
      Blue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur
      cursus velit, sed cursus erat. Integer scelerisque odio a consectetur laoreet.
      Nam at ante ultricies, volutpat risus vitae, interdum risus. Suspendisse
      sollicitudin odio a felis ornare, nec elementum velit convallis. Vestibulum
      at imperdiet lorem. Sed consectetur pretium nisi, malesuada ullamcorper nibh viverra
      vel.
  </div>
</div>

Я вижу плавные переходы на зеленой и синей колонках, меняющих размер, но когда красная колонка исчезает, кажется, что она закрывается, как видно на http://www.cssdesk.com/xRDXJ

Я хочу, чтобы красный столбец оживил по ширине: 0 Есть ли способ сделать это?

Спасибо, Абэ

...