template - grid css responsive
Usando transiciones CSS en CSS Grid Layout (7)
Estoy tratando de hacer que mi encabezado adhesivo tenga un efecto de transición, por lo que se facilita en lugar de solo un movimiento rápido.
¿Qué estoy haciendo mal?
Aquí está mi una versión de trabajo:
http://codepen.io/juanmata/pen/RVMbmr
Básicamente, el siguiente código agrega la clase pequeña a mi clase contenedora, esto funciona bien.
$(window).on(''load'', function() {
$(window).on("scroll touchmove", function () {
$(''.wrapper'').toggleClass(''tiny'', $(document).scrollTop() > 0);
});
});
Aquí está la parte de CSS:
.wrapper {
grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tiny {
grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}
Entonces, el encabezado se encoge como debería, pero no hay animación, ¿me he perdido algo o las transiciones simplemente no funcionan con la cuadrícula?
Aquí hay un enlace a los documentos css-grid.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
$(window).on(''load'', function() {
$(window).on("scroll touchmove", function() {
$(''.wrapper'').toggleClass(''tiny'', $(document).scrollTop() > 0);
});
});
* {
margin:0;
padding:0;
}
.wrapper {
display: grid;
grid-gap: 0px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
grid-template-areas:
"head head head head"
"main main main main"
"leader leader leader leader"
"foot foot foot foot";
background-color: #fff;
color: #444;
}
.tiny {
grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
font-size: 150%;
}
.box .box {
background-color: lightcoral;
}
.head {
grid-area: head;
background-color: #999;
z-index: 2;
display: grid;
grid-gap: 0px;
grid-template-columns: 20% 1fr;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
position: sticky;
top: 0;
}
.logo{
height: inherit;
grid-column: 1;
grid-row: 1;
background-color:red;
position: relative;
overflow: hidden;
}
.logo img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
max-width: 100%;
height: auto;
}
.main {
grid-area: main;
/* CSS Grid */
z-index: 1;
grid-column: head-start / head-end;
grid-row: head-start / leader-start;
background-color: red;
}
.leader {
grid-area: leader;
z-index:1;
display: grid;
grid-gap: 0px;
grid-template-columns: repeat(4, 1fr );
}
.foot {
grid-area: foot;
z-index:1;
}
<div class="wrapper">
<div class="box head">
<div class="box logo">
<a href="#"><img src="https://unsplash.it/200/300/?random" /></a>
</div>
<div class="box nav">nav</div>
</div>
<div class="box main">main</div>
<div class="box leader">
<div class="box leader-1">1</div>
<div class="box leader-2">2</div>
<div class="box leader-3">3</div>
<div class="box leader-4">4</div>
</div>
<div class="box foot">foot</div>
</div>
Como solución alternativa, puede trabajar con el tamaño de los elementos de la cuadrícula en lugar de con grid-template-columns grid-template-rows o grid-template-rows .
Podrías hacerlo:
grid-container {
display: inline-grid;
grid-template-columns: 100px 20vw 200px;
background-color: black;
height: 230px;
transition: 2s;
/* non-essential */
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
}
grid-container:hover {
background-color: red;
height: 130px;
}
grid-item {
height: 100px;
transition: height 2s;
background-color: lightgreen;
}
grid-container:hover .first-row {
height: 25px;
}
grid-container:hover .last-row {
height: 75px;
}
<grid-container>
<grid-item class=''first-row''></grid-item>
<grid-item class=''first-row''></grid-item>
<grid-item class=''first-row''></grid-item>
<grid-item class=''last-row''></grid-item>
<grid-item class=''last-row''></grid-item>
<grid-item class=''last-row''></grid-item>
</grid-container>
Aquí hay otro ejemplo de 2x2: https://codepen.io/erik127/pen/OvodQR
Y aquí hay un ejemplo más extenso donde puede agregar más columnas o filas: https://codepen.io/erik127/pen/rdZbxL
Desafortunadamente, es un montón de javascript, sería bueno si grid-template-columns grid-template-rows fueran animables.
Otra alternativa que podría funcionar en algunos casos de uso (si sus elementos de cuadrícula no abarcan varias filas) es el uso de flexbox junto con una cuadrícula.
De acuerdo con la especificación, las transiciones deberían funcionar en grid-template-columns grid-template-rows .
7.2. Tamaño de pista explícito: las propiedades de las
grid-template-rowsgrid-template-columnsAnimable: como una simple lista de longitud, porcentaje o cálculo, siempre que las únicas diferencias sean los valores de la longitud, el porcentaje o los componentes de cálculo en la lista
Por lo tanto, si mi interpretación es correcta, siempre y cuando los únicos cambios sean los valores de las propiedades, sin cambios en la estructura de la regla, las transiciones deberían funcionar. Pero no lo hacen .
ACTUALIZAR
Esto funciona pero hasta ahora solo se implementa en Firefox. Sigue aquí para otras actualizaciones del navegador. https://codepen.io/matuzo/post/animating-css-grid-layout-properties
~ Una contribución en los comentarios de @bcbrian
Aquí hay una prueba que creé:
grid-container {
display: inline-grid;
grid-template-columns: 100px 20vw 200px;
grid-template-rows: repeat(2, 100px);
background-color: black;
height: 230px;
transition: 2s;
/* non-essential */
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
}
grid-container:hover {
grid-template-columns: 50px 10vw 100px;
grid-template-rows: repeat(2, 50px);
background-color: red;
height: 130px;
transition: 2s;
}
grid-item {
background-color: lightgreen;
}
<grid-container>
<grid-item></grid-item>
<grid-item></grid-item>
<grid-item></grid-item>
<grid-item></grid-item>
<grid-item></grid-item>
<grid-item></grid-item>
</grid-container>
En la prueba, la transición funciona en la altura y el color de fondo, pero no en grid-template-rows grid-template-columns o grid-template-columns .
En mi caso, estaba intentando abrir el menú de la barra lateral usando este código:
.wrapper{
display: grid;
grid-template-columns: 0 100%;
transition: all 1s;
.sidebar{
background-color: blue;
}
.content{
background-color: red;
}
}
.wrapper.sidebar-open{
grid-template-columns: 300px 100%;
transition: all 1s;
}
pero la transición no estaba funcionando para las columnas de plantilla de cuadrícula . Esta es mi solución:
.wrapper{
display: grid;
grid-template-columns: auto 100%;
.sidebar{
width: 0;
background-color: blue;
transition: all 1s;
}
.content{
background-color: red;
}
}
.sidebar.sidebar-open{
width: 300px;
transition: all 1s;
}
Tal vez, ayuda a alguien.
Hay una forma de cambiar el tamaño de los elementos de la cuadrícula en la transición usando solo CSS, pero si desea cambiar el tamaño, debe usar% ''s correctamente, pero en sus ejemplos existe un problema debido a la posición pegajosa. Tienes que agregar altura en tu elemento .head y luego cambiar la altura después de agregar la clase .tiny . Aquí puedes ver cómo lo arreglé (supongo que ese es el resultado que querías tener):
La respuesta de Michael debería usar% ''s en su ejemplo porque en este momento tiene un efecto de "parpadear" en el desplazamiento, si se cambia a valores de px en%'' s, funcionará perfectamente en el cambio de tamaño. Aquí está ese ejemplo cambiado en% ''s:
Otro enfoque es utilizar transform . En realidad, incluso podría ser mejor porque la transformación a lo largo de w / opacidad puede alcanzar 60 fps porque es acelerado por GPU en lugar de acelerado por CPU (el navegador tiene que hacer menos trabajo).
Aquí hay un ejemplo: https://codepen.io/oneezy/pen/YabaoR
.sides {
display: grid;
grid-template-columns: 50vw 50vw;
}
.monkey { animation: 0.7s monkey cubic-bezier(.86,0,.07,1) 0.4s both; }
.robot { animation: 0.7s robot cubic-bezier(.86,0,.07,1) 0.4s both; }
@keyframes monkey {
0% { transform: translate(-50vw); }
100% { transform: 0; }
}
@keyframes robot {
0% { transform: translate(50vw); }
100% { transform: 0; }
}
Por ahora la transición en la plantilla de cuadrícula no está funcionando. Pero puedes usar transformar así:
var button = document.querySelector("#btnToggle");
button.addEventListener("click",function(){
var content = document.querySelector(".g-content");
if(content.classList.contains("animate"))
content.classList.remove("animate");
else
content.classList.add("animate");
});
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
.g-content{
display:grid;
height:100%;
grid-template-columns: 200px 1fr;
grid-template-rows:60px 1fr 30px;
grid-template-areas:
"g-header g-header"
"g-side g-main"
"g-footer g-footer";
overflow-x:hidden;
}
.g-header{
grid-area:g-header;
background:#2B4A6B;
display:grid;
grid-template-columns: max-content 1fr;
}
.g-header button{
align-self:center;
margin:0 5px;
}
.g-side{
grid-area:g-side;
background:#272B30;
transition:all 0.5s;
}
.g-main{
grid-area:g-main;
background:#FFFFFA;
transition:all 0.5s;
}
.g-footer{
grid-area:g-footer;
background:#7E827A
}
.animate .g-main{
width:calc(100% + 200px);
transform:translateX(-200px);
}
.animate .g-side{
transform:translateX(-200px);
}
<div class="g-content">
<div class="g-header">
<button id="btnToggle">
Toggle
</button>
</div>
<div class="g-side">
</div>
<div class="g-main">
test
</div>
<div class="g-footer">
</div>
</div>
Utilicé GSAP para animar las columnas de plantilla de cuadrícula y las propiedades de filas de plantilla de cuadrícula:
function changeGridTemplateColumns(pattern) {
TweenMax.to(".container",
1, {
gridTemplateColumns: pattern
}
);
}
function changeGridTemplateRows(pattern) {
TweenMax.to(".container",
1, {
gridTemplateRows: pattern
}
);
}
$(document).ready(
function() {
$(".el-a,.el-b,.el-c").mouseenter(
function() {
changeGridTemplateRows("2fr 1fr");
}
);
$(".el-d,.el-e,.el-f").mouseenter(
function() {
changeGridTemplateRows("1fr 2fr");
}
);
$(".el-a,.el-d").mouseenter(
function() {
changeGridTemplateColumns("2fr 1fr 1fr");
}
);
$(".el-b,.el-e").mouseenter(
function() {
changeGridTemplateColumns("1fr 2fr 1fr");
}
);
$(".el-c,.el-f").mouseenter(
function() {
changeGridTemplateColumns("1fr 1fr 2fr");
}
);
$(".container").mouseleave(
function() {
changeGridTemplateColumns("1fr 1fr 1fr");
changeGridTemplateRows("1fr 1fr");
}
);
}
);
.container {
width: 50vw;
height: 50vw;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas: "a b c" "d e f";
}
.el-a {
grid-area: a;
background-color: skyblue;
}
.el-b {
grid-area: b;
background-color: darkseagreen;
}
.el-c {
grid-area: c;
background-color: coral;
}
.el-d {
grid-area: d;
background-color: gold;
}
.el-e {
grid-area: e;
background-color: plum;
}
.el-f {
grid-area: f;
background-color: beige;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="el-a"></div>
<div class="el-d"></div>
<div class="el-b"></div>
<div class="el-e"></div>
<div class="el-c"></div>
<div class="el-f"></div>
</div>