为什么从自动对焦开始过渡？

本文介绍了为什么从自动对焦开始过渡？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个使用 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

这篇关于为什么从自动对焦开始过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！