gpt4 book ai didi

html - 为什么过渡从自动对焦开始?

转载 作者:太空狗 更新时间:2023-10-29 15:14:35 25 4
gpt4 key购买 nike

我创建了一个使用 autofocus="autofocus" 的联系表单。我注意到奇怪的事情,当一个表单有自动对焦时,我的导航上的过渡被启动了。我只在 Firefox 中注意到它。有什么地方我做错了吗,还是 firefox 的行为方式(错误)?

表格:

<form method="post" action="" id="contactForm">
<textarea id="contactF" name="message" autofocus="autofocus" tabindex="1" placeholder="Type your message here" required="required"></textarea>
<input type="submit" id="contactS" name="submit" value="Send" tabindex="3" />
Your Name: <input type="text" id="contactN" name="name" tabindex="2" placeholder="Type your Name" required="required" />
</form>

导航的 CSS:

#menu ul li {
width: 251px;
text-align:center;
display: inline-block;
background: #ddd;
height: 30px;
line-height: 30px;
box-shadow: 126px 0 0px 0px #000 inset, -126px 0 0px 0px #000 inset;
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
transition: all 400ms ease-in;
}

}

#menu ul li:hover, #menu li.active {
box-shadow: 0 0 0px 0px #000 inset, -0 0 0px 0px #000 inset;
}

#menu ul a:link,#menu ul a:visited {
display: block;
font-size: 17px;
width: 251px;
text-decoration: none;
font-weight: bold;
color: #6DB7B5;
margin:0 auto;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}

#menu ul a:hover, #menu li.active a {
color: #FF6181;
}

最佳答案

好的新尝试,经过一些阅读后我发现这可能是转换的普遍问题。如果发生这种情况,只有一种解决方法。

你必须给你的 body 添加一个类

<body class="preload">

这个类根本没有过渡

.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}

最后你必须用一点 js 删除预加载类。

$("window").load(function() {
$("body").removeClass("preload");
});

希望这有帮助,反馈会很好

关于html - 为什么过渡从自动对焦开始?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16376605/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com