How does one slide in and element on the same "level" of the one sliding out?

Question

I am implementing a simple widget but I am a primer with animations :)

How can I avoid the second "screen" to occupy space while transitioning in?

Here my fiddle: https://codesandbox.io/s/7w4yw5yq4q

As you can see when you click a button on the first "screen" both the first "screen" and the second are in the DOM so the widget doubles its height.

I want that the two occupy the same line so the height of the widget stays the same.

I guess that I need to use absolute positioning but I want to be sure that it is the right way to do this and see an example of the implementation.

Maybe is there a way to do it without losing the height of the parent (that when the children are absolute positioned goes to 0)

Answer 1

Likely a bit late to answer this but may be others looking for the same answer may benefit.

Is this what you were asking to do?

One thing in Mithril is that if you don't want to return an element, you can just return a null. I use that technique a lot like showHeading ? m("h1", "Heading!") : null

The following is the mod of your code and its fiddle to demonstrate. There are other ways of doing it like dynamically changing the class depending on the toggle.

var m = require("mithril");
import "./style.css";

let app = function() {
let toggle = false;

return {
    view: vnode => {
    return m(".steps", [
        m("button", { onclick: () => (toggle = !toggle) }, "toggle"),
        m(
        ".step",
        toggle
            ? null
            : [m("h1", "Title 1"), m("p", "jfewlkfjewklfjwelkfjklewjfw")]
        ),
        toggle
        ? m(".step.slide-in", [
            m("h1", "Title 2"),
            m("p", "jfewlkfjewklfjwelkfjklewjfw")
            ])
        : "",
        m(".step", [m("h1", "Title 3 "), m("p", "jfewlkfjewklfjwelkfjklewjfw")])
    ]);
    }
};
};

m.mount(document.getElementById("app"), app);