Могу ли я анимировать «столбец сетки»?
Я установил transition: all ease-in-out 1s;, но таким же образом изменение свойств grid-column не работает с transition.
Есть ли другой способ использовать анимацию здесь?
<div class = "projects">
<div class = "project" style = "background: url(img/p1.png) center no-repeat / cover"></div>
<div class = "project" style = "background: url(img/p2.jpg) center no-repeat / cover"></div>
<div class = "project" style = "background: url(img/p3.jpg) center no-repeat / cover"></div>
<div class = "project" style = "background: url(img/p4.png) center no-repeat / cover"></div>
</div>
.projects {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: repeat(4, minmax(100px, 1fr));
grid-auto-rows: 500px;
}
.project {
width: 100%;
transition: all ease-in-out 1s;
}
.project:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.project:nth-child(1):hover {
grid-column: 1/3;
z-index: 2;
}
Залил облегченную версию на кодовая ручка
Ответы 3
Похоже, не, что вы можете, в том смысле, в каком вы имеете в виду, анимировать grid-column, основываясь на документации в Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/столбец сетки
Тип анимации столбца сетки — discrete, что означает отсутствие «анимации» или интерполяции.
Это облом.
Есть некоторые хакерские (или, в других случаях, JS-тяжелые) обходные пути, но YMMV в зависимости от того, сколько усилий вы хотите приложить. Посмотрите эту тему, например:
Вы можете имитировать такой эффект, используя поля, как показано ниже:
.projects {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: repeat(4, minmax(100px, 1fr));
grid-auto-rows: 500px;
}
.project {
transition:
margin ease-in-out 1s,
z-index 0s 1s;
}
.project:nth-child(1) {
grid-column: 1;
grid-row: 1;
z-index:0;
}
.project:nth-child(1):hover {
margin-right:-200%;
z-index: 2;
}<div class = "projects">
<div class = "project" style = "background: url(https://picsum.photos/200/300?image=0) center no-repeat / cover"></div>
<div class = "project" style = "background: url(https://picsum.photos/200/300?image=1069) center no-repeat / cover"></div>
<div class = "project" style = "background: url(https://picsum.photos/200/300?image=5) center no-repeat / cover"></div>
<div class = "project" style = "background: url(https://picsum.photos/200/300?image=10) center no-repeat / cover"></div>
</div>Связано: Почему только некоторые из моих полей CSS Grid расширяются, когда я навожу на них курсор?
Немного запоздал с этим ответом, но, к сожалению: нет, это невозможно и, вероятно, не станет частью спецификации, поскольку для эффективности существуют другие специальные свойства того, как сетки отображаются браузером.
В качестве альтернативы и для целей предоставленной вами демонстрации аналогичные макеты можно выполнить с помощью display:flex + flex-grow:n, где значение n является целым числом и может считаться эквивалентным nfr. Вы также можете использовать flex-basis и указать % или px, которые также можно анимировать.