带有网格模板区域的网格显示中的过渡持续时间:如何使其工作? [英] Transition duration in grid display with grid-template-areas : how to make it work?

问题描述

当我单击按钮时，我将布局的网格模板从更改为

when I click on button I changed the grid template of my layout from

#chatContainer {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas:
        "header header header header"
        "chat chat chat users"
        "footer footer footer footer";
    grid-template-columns: 1fr 1fr 1fr 350px;
    grid-template-rows: 80px 1fr 80px;
}

到

#chatContainer.resized {
    grid-template-areas:
            "header header header header"
            "chat chat chat chat"
            "footer footer footer footer";
    grid-template-columns: 1fr 1fr 1fr 350px;
    transition-duration: 2s;

}

(我让用户部分消失了)

(I make the users part disappear)

但是过渡持续时间完全没有效果.

But The transition duration has no effect at all.

更改网格模板区域时是否可以添加一些动画/过渡效果?

Is it possible to add some animation/transition effect when changing the grid-template-areas ?

推荐答案

根据需要的值，可以更改过渡事件以使分频平滑，这是您选择的设置网格方式所无法实现的.

As you need values the transition-event can change to make the crossover smooth that is not possible by your choosed way to setup the grid.

但是，如果您仅更改网格的设置，则可能.您只需使用百分比值，而不是使用 grid-template-areas 设置网格.

But it is possible if you just change your setup of the grid. You only need to use percentage values instead of setting your grid up with grid-template-areas.

注意:

1. 简化示例只是为了说明/演示技术.
2. 已将过渡添加到悬停事件中，而不是按钮技术(=添加一个类)".但是像在项目中一样添加类也应该可以.
3. 也可以使用 fr 代替％作为值.
4. 在示例中，边界阻止网格区域完全消失.如果这是您遇到的问题，则将网格容器仅用作网格容器(= grid-elements)，然后将样式添加到内部content-div-container(=在其中添加所需的边框).

查看示例:

* {
    box-sizing: border-box;
}
.grid-wrapper {
    display: grid;
    width: 100%;
    height: 100px;
    grid-template-columns: 75% 25%;
    transition: all 2s;         
}

.grid-wrapper > div {
    border: 1px solid magenta;
    overflow-x: hidden;
}

.chat {
    background: yellow;
}
.user {
    background: orange;
    overflow: hidden;
}

.grid-wrapper:hover {
    grid-template-columns: 100% 0%;
    transition: all 2s;         
}

   <h2>Hover it to see how technique works:</h2>

<div class="grid-wrapper">
    <div class="chat">Chat</div>
    <div class="user">User</div>
</div>

更新:添加了两个说明

这篇关于带有网格模板区域的网格显示中的过渡持续时间:如何使其工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！