javascript - 如何在 CSS 和 Javascript 中为网格区域设置动画？

Question

如何在我的网格上放置由 Javascript 修改的动画。我有这个CSS定义：

#lt-container-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: 50px 40px auto auto 50px;
    grid-template-areas: "title title" "header header" "sidebar sidebar" "main main" "footer footer";
}

#lt-sidebar {
    padding: 0;
    background: #4f4e4a;
    grid-area: sidebar;
    color: #9c6c00;
    display: block;
    height: auto;
}

我正在尝试通过在我的 javascript 文件上执行此操作来为#lt-sidebar设置动画：

function manageMainPanel(x){
            x.classList.toggle("change");
            var width = screen.width;
            console.log("device width: "+width);
            if(width < 736){
                if(document.getElementById("lt-container-grid").style.gridTemplateRows === "50px 40px auto auto 50px"){
                    document.getElementById("lt-container-grid").style.gridTemplateRows = "50px 40px 0px auto 50px";
                    document.getElementById("lt-sidebar").style.display = "none";
                    document.getElementById("lt-sidebar").style.height = "0";
                    document.getElementById("lt-sidebar").style.transition = "all 2s";
                }else{
                    document.getElementById("lt-container-grid").style.gridTemplateRows = "50px 40px auto auto 50px";
                    document.getElementById("lt-sidebar").style.display = "block";
                    document.getElementById("lt-sidebar").style.height = "auto";
                    document.getElementById("lt-sidebar").style.transition = "all 2s";
                }...

在我的 html 上：

<div class="lt-data-toggle" onclick="manageMainPanel(this)">

标签： javascripthtmlcss

Answer 1

您可以使用 ：

.sides {
  animation: 0.7s curtain cubic-bezier(.86,0,.07,1) 0.4s both;

  display: grid;
  grid-template-columns: 50vw 50vw;
}


@keyframes curtain {
  0% {
    grid-gap: 100vw; 
  }

  100% {
    grid-gap: 0;
  }
}