动态网格模板列的CSS转换

pkln4tw6 于 2023-02-06 发布在其他

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

我有一个项目，它需要动态更改grid-column（我已经在下面的链接中实现：https://codepen.io/DemogorGod/pen/oNMVvMV

我需要添加一个过渡到网格中，一旦按钮被单击，两列过渡轻松...
我希望有一个纯粹的CSS解决方案，但是，如果其他解决方案存在，我愿意实现他们。
如果我使用Vue.js有什么不同的话...

css

来源：https://stackoverflow.com/questions/75348178/css-transitions-for-dynamic-grid-template-columns

1条答案

按热度按时间

nszi6y051#

在这个cool website的帮助下，我发现动画只是grid-template-columns，而不是grid-columns。有了这个信息，我只是改变了你的css代码中的逻辑-在.grid-container中切换grid-template-columns。所以你不再需要css代码来处理物品，你只需要更新parent：

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
  width: 200px;
}

.grid_container {
  width: 600px;
  height: 200px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin: 10px 20px;
  transition: all 0.3s
}

.reverse {
  grid-template-columns: 2fr 1fr;
}

.grid_side_one {
  border: #FBBD84 solid 1px;
}

.grid_side_two {
  border: #0D5FFF solid 1px;
}

<html>
<div id="app">
  <h5>
    Hello World
  </h5>
  <p>
    Dynamic grid with transitions
  </p>
  <button @click="toggle">
      Toggle Cols
    </button>
  <div class="grid_container" :class="ToggleCols ? 'reverse' : ''">
    <div class="grid_side_one">
      Left Side
    </div>
    <div class="grid_side_two">
      Rigth Side
    </div>
  </div>
  <div>
    Toggle: {{ ToggleCols }}
  </div>
</div>
<script src="https://unpkg.com/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        ToggleCols: true
      }
    },
    methods: {
      toggle() {
        this.ToggleCols = !this.ToggleCols
      }
    }
  })
</script>

</html>

赞(0）回复(0）举报 2023-02-06

我来回答

动态网格模板列的CSS转换

1条答案

相关问题

热门标签

最新问答