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

Question

我有两个问题。

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

如果您在Microsoft Edge上查看网页，则会发生第二个问题。在Microsoft Edge中，标题“ White Bact”显示在两行上。我希望标题仅显示一行。如果要在Google Chrome浏览器上查看它，则标题在一行上。我设计并测试了Google chrome上的所有内容。我希望每个浏览器都一样。

我创建了一个链接，任何人都可以从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);
}

对于第二个问题，如果在width: 180px;中删除了.logo > h1 > a，则“白边”将在Edge的一行上显示：

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