Question

我正在实现一个简单的小部件，但我是动画的入门读物：）

在过渡时如何避免第二个“屏幕”占据空间？

这是我的小提琴：https://codesandbox.io/s/7w4yw5yq4q

如您所见，当您单击第一个“屏幕”上的按钮时，第一个“屏幕”和第二个都在DOM中，因此小部件的高度加倍。

我希望两者占据同一行，以便小部件的高度保持不变。

我想我需要使用绝对定位，但是我想确保这是正确的方法，并查看实现示例。

也许有一种方法可以做到而又不会失去父级的身高（当子级的绝对位置变为0时）

Answer 1

回答这个问题可能有点晚了，但可能会有其他人寻求相同的答案。

这是你要做什么吗？

秘银的一件事是，如果您不想返回一个元素，则可以只返回一个null。我非常喜欢showHeading ? m("h1", "Heading!") : null

以下是您代码的mod及其要演示的fiddle。还有其他方法，例如根据切换动态更改class。

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);

如何将一个滑入和滑入一个滑出的同一“级别”上？

1 个答案: