如何防止每次浏览器刷新或第一次打开网页时过渡元素都过渡？

Question

我有两个问题。

我目前正在设计一个移动网站。对于导航，我决定使用 link 的汉堡包方法。当您在检查输入元素时使用属性变换点击汉堡包时，我试图将汉堡包转换为 X。问题是，当您第一次打开网页或刷新浏览器时，过渡元素会在不单击或点击汉堡包的情况下过渡。有没有办法解决这个问题。

如果您在 Microsoft Edge 上查看 web-page，则会出现第二个问题。在 Microsoft Edge 中，标题 "White Bact" 分两行显示。我希望标题只显示一行。如果您要在 Google Chrome 上查看它，标题在一行上。我在 google chrome 上设计并测试了所有内容。我希望每个浏览器都一样。

我创建了一个 link 供任何人从 google 驱动器下载文件。这些文件位于压缩文件夹中，因此您必须解压缩文件。我想做一个JSFiddle，但是不会出现问题。

您应该查看的主要文件是 index.css 和 index.html。

https://drive.google.com/file/d/11N6l8OwcO_waeHcvfdWJyeFgw3O8zE4w/view?usp=sharing

Answer 1

第一个问题，你是不是不想在打开页面时出现汉堡包的过渡？那么我认为你只能在点击汉堡包时使用过渡：

span.ham:nth-of-type(2) {
    /*transition: transform 500ms cubic-bezier(0.01, 0.24, 0.28, 1.35);*/
}

...

/* if the hamburger is clicked */
#hamburger:checked ~ label > span.ham:nth-of-type(2) {
    transform: scale(0);
    transition: transform 500ms cubic-bezier(0.01, 0.24, 0.28, 1.35);
}

对于第二个问题，如果在.logo > h1 > a中删除width: 180px;，"White Bact"将在Edge上显示在一行上：

.logo > h1 > a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /*width: 180px;*/
    text-align: center;
}

如何防止每次浏览器刷新或第一次打开网页时过渡元素都过渡？

How to prevent transition elements from transitioning every time the browser refresh or open the web page for the first time?

html

css

layout

transition

microsoft-edge