为什么从自动对焦开始过渡？ [英] Why is transition started up with autofocus?
问题描述
我创建了一个使用 autofocus = autofocus 的联系表单。我注意到了一件奇怪的事情，当表单具有自动聚焦功能时，我的导航上的过渡就会触发。我只在Firefox中注意到它。
FORM：
<$ p是我做错了还是Firefox的行为（错误）？ $ p>
< form method = post action = id = contactForm>
< textarea id = contactF name = message autofocus = autofocus tabindex = 1 placeholder =在此处输入您的消息 required =必需< // textarea>
< input type = submit id = contactS name = submit value =发送 tabindex = 3 />
您的姓名：<输入type = text id = contactN name = name tabindex = 2 placeholder =输入您的姓名 required =必填 />
< / form>
用于Nav的CSS：
#menu ul li {
宽度：251px；
text-align：center;
显示：inline-block;
背景：#ddd;
高度：30像素；
行高：30px;
框阴影：126px 0 0px 0px＃000 inset，-126px 0 0px 0px＃000 inset;
-webkit-transition：全部400ms缓解；
-moz-transition：所有400ms缓入时间；
-o-transition：所有400ms缓入时间；
过渡：所有400ms缓解；
}
}
#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;
宽度：251px；
文字修饰：无；
font-weight：粗体;
颜色：＃6DB7B5;
保证金：0自动；
-webkit-transition：全部400ms缓解；
-moz-transition：全部400ms缓解；
-o-transition：所有400ms缓解；
过渡：所有400ms缓解；
}
#menu ul a：hover，#menu li.active a {
color：＃FF6181;
}
稍作尝试阅读我发现这可能是过渡的普遍问题。
如果发生这种情况，则只有一个解决方法。
您必须为自己的身体添加一个类
< body class = preload>
该类完全没有转换
.preload * {
-webkit-transition：none！important;
-moz-transition：无！重要；
-ms-transition：无！重要
-o-transition：无！重要；
}
最后，您必须删除带有一些js的preload类。
$（ window）。load（function（）{
$（ body）。removeClass（ preload）;
}）;
希望这会有所帮助，反馈会很好
I created a contact form which uses autofocus="autofocus". I have noticed weird thing, when a form has autofocus the transition on my nav is fired up. I have only noticed it in Firefox. Is there anything that I did wrong or is it just how firefox behaves(bug)?
FORM:
<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 for Nav:
#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;
}
Ok new try, after some reading i found out that could be a general problem with transitions. There is only one fix if this happens.
you have to add a class to your body
<body class="preload">
this class gets no transition at all
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
And in the end you have to remove the preload class with a little js.
$("window").load(function() {
$("body").removeClass("preload");
});
Hope this helps, feedback would be nice
这篇关于为什么从自动对焦开始过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
