那些遇到过的问题

在CSS网格布局中使用CSS过渡

Dan*_*Dan 37 css css3 css-transitions css-grid

我试图让我的粘性标题具有过渡效果,因此它可以减轻而不仅仅是快速移动.

我究竟做错了什么？

这是我的工作版本:

http://codepen.io/juanmata/pen/RVMbmr

基本上下面的代码将类添加到我的包装类中,这很好用.

$(window).on('load', function() {
    $(window).on("scroll touchmove", function () {
        $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
    });
});
Run Code Online (Sandbox Code Playgroud)

这是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;
}
Run Code Online (Sandbox Code Playgroud)

所以标题确实缩小了它应该但没有动画,我错过了什么或转换根本不适用于网格？

这是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);
  });
});
Run Code Online (Sandbox Code Playgroud) 
* {
	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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Mic*_*l_B 30

根据规范,过渡应该从事的grid-template-columns和grid-template-rows.

7.2.显式跟踪大小:grid-template-rows和 grid-template-columns 属性

动画:作为长度,百分比或计算的简单列表,前提是唯一的差异是列表中的长度,百分比或计算组件的值

因此,如果我的解释是正确的,只要对属性的值进行唯一更改,而不更改规则的结构,则转换应该起作用.但他们没有.

UPDATE

这确实有效,但到目前为止只在Firefox中实现.按照此处获取其他浏览器更新. https://codepen.io/matuzo/post/animating-css-grid-layout-properties

〜@ bcbrian在评论中的贡献

这是我创建的一个测试:

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

jsFiddle演示

在测试中,过渡适用于高度和背景颜色,但不适用于grid-template-rows或grid-template-columns.

  • 嗨迈克尔，感谢您的回答。尽管您的背景是动画的，但网格框却不是。我已经成功地通过给每个选定的 div 一个高度标签并基本上覆盖该 div 的网格模板列来使盒子动画化，它有效，但它更像是一个黑客。 (2认同)
  • 是的，过渡仅适用于高度和背景色。这就是我的答案（请参见代码段下方的最后一句话）。 (2认同)
  • 错过了那部分。我会将其标记为已回答，因为我们无法进一步处理它。 (2认同)
  • 这确实有效，但目前仅在 Firefox 中实现。按照此处获取其他浏览器更新。https://codepen.io/matuzo/post/animating-css-grid-layout-properties (2认同)

小智 7

目前网格模板上的转换不起作用。但你可以像这样使用转换：

jsFiddle

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");
});
Run Code Online (Sandbox Code Playgroud) 
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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Dmi*_*nko 7

就我而言，我尝试使用以下代码打开侧边栏菜单：

.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;
}
Run Code Online (Sandbox Code Playgroud)

但过渡不适用于 grid-template-columns。这是我的解决方案：

.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;
}
Run Code Online (Sandbox Code Playgroud)

也许，它对某人有帮助。

  • 非常有帮助的答案，因为它关注的是 CSS 问题。关键是将要转换的 grid-template-columns 设置为 auto ，然后将未打开元素的宽度设置为固定像素宽度（例如 width: 0 ），将打开元素的宽度设置为所需的开放像素宽度（例如“宽度：300px”） (3认同)

Pep*_*ruz 7

我使用 GSAP 为 grid-template-columns 和 grid-template-rows 属性设置动画：

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");
      }
    );
  }
);
Run Code Online (Sandbox Code Playgroud) 
.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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

  • 可惜他们的执照不是麻省理工学院的 (2认同)

Eri*_*rik 5

解决方法是，您可以使用网格项目的大小来代替grid-template-columns或grid-template-rows。

您可以这样做： 

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

这是另一个2x2示例：https： //codepen.io/erik127/pen/OvodQR

这里是一个更广泛的示例，您可以在其中添加更多列或行：https : //codepen.io/erik127/pen/rdZbxL

不幸的是，它有很多JavaScript，如果可以grid-template-columns并且grid-template-rows可以动画，那就太好了。

在某些用例（如果您的网格项目不跨越多行）中可能有效的另一种替代方法是将flexbox与网格一起使用。

  • 请不要发布仅链接到外部网站的答案；当这些网站瘫痪时，您的答案对读者就失去了用处！ (3认同)
  • 谢谢@TylerH，我在答案中添加了一个代码片段。 (2认同)

归档时间：

查看次数：

30120 次

最近记录：

7 年，3 月 前
相关归档
如何将绝对定位元素水平居中在100%宽度的div中？ 148
CSS类命名约定 65
使用flex in react-native使物品粘在底部 45
$ .getScript,但对于jQuery中的样式表？ 23
使用CSS Grid折叠边框 23
将Bootstrap导航对齐到中心 22
如何进行文本转换:大写与希腊文正常工作？ 18
获取/设置当前@keyframes百分比/更改关键帧 10
CSS3没有js/images的输入元素的圆角 5
使用CSS创建具有动态高度和向内箭头的div 3
难疑归档
撤消尚未推送的Git合并 3695
从数组创建ArrayList 3441
迭代字典的最佳方法是什么？ 2455
npm install的--save选项是什么？ 1779
Java是否支持默认参数值？ 1569
如何计算列表项的出现次数？ 1417
Git push需要用户名和密码 1327
迭代集合,在循环中删除对象时避免使用ConcurrentModificationException 1158
什么是在Vim中评论/取消注释行的快速方法？ 1081
自定义HTTP标头:命名约定 1051