javascript - 网格模板列动画

标签 javascript css animation transition css-grid

<分区>

是否可以为 grid-template-columns 属性设置动画? 我正在构建技术文档的布局,在网格的第一列中您可以看到不同错误的描述,在第二列中可以看到相关技术内容的超链接。

按下一个按钮,使用 javascript,超链接容器将消失,并将网格的列号更改为 1。

它可以正常工作,但效果是捕捉效果,我的目标是缓出幻灯片效果。

CSS:

.content-grid-rc {
    display: grid;
    grid-template-columns: auto 350px;
    grid-template-rows: auto auto;
    grid-template-areas: "a b"
                     "c c";
    transition: all 1s;

JavaScript:

    function hideLinks(){
    let x = document.getElementsByClassName("card");
        for(let i = 0; i < x.length; i++){
            x[i].style.display = "none";
            document.getElementById("content-grid-rc").style.gridTemplateColumns = "100% 0%";
        }
    }

非常感谢您的提示!

最佳答案

grid-template-columns 可以 是动画的,但不幸的是 - 直到今天 - 还没有任何已知的浏览器支持。但是,您可以在所有浏览器中为 (grid-)gap(grid-)row-gap(grid-)column-gap 设置动画,Safari 除外。

关于javascript - 网格模板列动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53165120/

相关文章:

javascript - 使用 jQuery 迭代特定的 CSS-id

javascript - 无法加载资源 : the server responded with a status of 504 (Gateway Timeout)

html - 编号列表中的文本换行

javascript - 使用 Javascript 重启 CSS3 动画

c# - 当某个表单可见时重复运行代码

javascript - 尝试使用源元素加载 HTML5 视频时检测错误类型

javascript - 查找数组是否包含用户

html - Chrome 67.0.3396.87 中视频后面的黑框

javascript - 如何根据旁边的div类设置div高度?

iphone - 如何让处理程序重复 UIView animateWithDuration?