时间戳

首页 > 解决方案 > 一个滑入和一个滑出的元素如何在同一“水平”上？

css - 一个滑入和一个滑出的元素如何在同一“水平”上？

问题描述

我正在实现一个简单的小部件，但我是动画的入门者:)

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

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

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

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

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

也许有没有办法在不失去父母高度的情况下做到这一点（当孩子们绝对定位时，它会变为0）

标签： cssanimationcss-positionmithril.js

解决方案

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

这是你要求做的吗？

Mithril 中的一件事是，如果你不想返回一个元素，你可以只返回一个 null。我使用这种技术很像showHeading ? m("h1", "Heading!") : null

以下是您的代码的 mod 及其要演示的小提琴。还有其他方法可以做到这一点，例如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);

推荐阅读