我们可以用CSS过渡动画grid-column-start吗？

3lxsmp7m 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(169)

我正尝试通过javascript动画化点击时发生的变化，理想情况下，我的项目不需要重构很多。
代码结构如下：

#container {
  display: grid;
  width: 100%;
  height: 100vh;
  grid-template-columns: 1fr 2fr 1fr;
  transition: .5s;
}

#sidebar {
  background-color: red;
  opacity: 0.5;
  height: 100%;
  border: 1px solid black;
  grid-column-start: 1;
  grid-column-end: 2;
}

#content {
  background-color: blue;
  border: 1px solid black;
  grid-column-start: 1;
  grid-column-end: 4;
  transition: .5s
}

<div id="container">
  <div id="sidebar"></div>
  <div id="content">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

当侧边栏打开时，我的#content div通过将grid-column-start更改为2而缩小。
给任何元素添加一个CSS过渡似乎都不起作用。我的问题是，有没有一种方法可以在不重新考虑HTML和/或CSS的情况下将其动画化？
我也曾尝试过用0 fr列（as demonstrated here）来动画侧边栏，但这并不适用于我的侧边栏元素，因为出于布局的原因，它目前被构建为包含在网格行中的弹出框。

css

来源：https://stackoverflow.com/questions/75886679/can-we-animate-grid-column-start-with-a-css-transition

1条答案

按热度按时间

yacmzcpb1#

“content”div使用transition和Javascript缩小宽度。宽度动画不适用于“grid column”属性。

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
  #container {
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-columns: 1fr 2fr 1fr;
    transition: .5s;
  }
  
  #sidebar {
    background-color: red;
    opacity: 0.5;
    height: 100%;
    border: 1px solid black;
    grid-column-start: 1;
    grid-column-end: 2;
    transition: .5s;
    pointer: cursor;
  }
  
  #content {
    width: 10%;
    background-color: blue;
    border: 1px solid black;
    grid-column-start: 2;
    grid-column-end: 4;
    transition: all 0.3s ease;
    writing-mode: vertical-lr;
  }
  
  h1 {
    font: 30px Helvetica;
    color: white;
  }
  
  h2 {
    margin-left: 10px;
    color: lightgray;
  }
</style>

<body>

  <script>
    function myDiv() {
      var yourUl = document.getElementById("content");
      yourUl.style.width = yourUl.style.width === '75%' ? '10%' : '75%';

    }
  </script>

  <div id="container" onclick=myDiv()>
    <div id="sidebar">
      <h1>Click Me</h1>
    </div>
    <div id="content">
      <h2>Navbar ^^</h2>

      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
  </div>

</body>

</html>

赞(0）回复(0）举报 2023-04-01

我来回答

我们可以用CSS过渡动画grid-column-start吗？

1条答案

相关问题

热门标签

最新问答