How can I animate grid box change with angular BrowserAnimationsModule?

Question

To describe my issue, I will start from the roots to explain what I am trying to do, and why I decided to use Grid Box for this, let's start off with two wireframes:

My layout is built up from two containers; the body and the sidebar. Don't think of it as this is the whole website, this is just a component.

The sidebar contains two elements, notes and chat.

Notes & chat elements can be mini-sized, but once it is mini-sized, the second part of the left body container will get wide and take the place that the sidebar used to take at it's bottom space, like in the example below:

So after researching a bit I couldn't find any other solution besides having 2 different components for the second-data part that needs to get wider, or just use a Grid Box, however, I must animate the side bar and the second part of the data with a transition of it's width changing.

There is an angular POC example I have created with Grid Box to achieve what I need without animation:

https://stackblitz.com/edit/angular-ivy-7tucsx?file=src/app/app.component.html

Is it possible to achieve this animation with grid box by just adding the .closed class to my .container like in the example POC?

Answer 1

There is a CSS only solution that can help you.

In the snippet, hover the container to make the bottom div expand.

The trick is to use a 3 column grid, and an auxiliar element that grows / shrinks:

In production , the trick element would have an height of 0, and be invisible.

.container {
    display: grid;
    border: solid 1px red;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: 100px 100px 10px;
    transition: all 3s;
    width: 500px;
}


#right {
    background-color: yellow;
    width: 200px;
    grid-column: 2 / span 2;
}

#bottom {
    background-color: lightgreen;
    grid-column: span 2;
}

#trick {
    background-color: tomato;
    grid-column: 2 / 3;
    width: 0px;
    transition: width 3s;
}

.container:hover #trick {
    width: 200px;
}

<div class="container">
    <div id="left">L</div>
    <div id="right">R</div>
    <div id="bottom">B</div>
    <div id="trick">T</div>
</div>