我正在尝试为网站上的搜索栏设置动画(这仍然是一个元素)动画有效，但是当动画开始时搜索输入只是传送自己，如下所示:
我将 jQuery 用于动画，只是因为我想在单击它时做其他事情，例如隐藏 Logo 和类似的东西。这是我的代码:
$(".search-field").focus(function () {
$(this).animate({ "width": "100%" }, "slow" );
// $(".logo").fadeOut();
});
$(".search-field").focusout(function () {
$(this).animate({ "width": "130px" }, "slow" );
// $(".logo").fadeIn();
});@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
z-index: 1;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after,
*:first-letter,
*:first-line {
background: transparent !important;
color: #000 !important; /* Black prints faster:
http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/* ==========================================================================
Real CSS
========================================================================== */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
line-height: 1.5;
}
.top {
position: fixed;
height: 50px;
/*padding: 12px;*/
width: 100vw;
background-color: #24292e;
color: rgba(255, 255, 255, 0.75);
z-index: 10;
}
.container {
padding-top: 2px;
width: 980px;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0
}
.nav-item {
padding: 12px;
float: left;
list-style: none;
}
.logo {
flex: unset;
}
.header-item {
display: flex;
flex-direction: row;
}
.nav-item1 {
width: 300px;
justify-content: space-around;
}
.nav-item3 {
width: 300px;
justify-content: space-between;
}
.search-field {
width: 130px;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.3);
background-image: url('https://cdn.rawgit.com/encharm/Font-Awesome-SVG-PNG/b7f74631/black/png/24/search.png');
background-position: 3px 3px;
background-repeat: no-repeat;
padding: 6px 20px 6px 40px;
transition: width 0.4s ease-in-out;
}
.sign {
display: flex;
flex-direction: row;
}
.sign-in {
margin-left: auto;
padding: 5px;
border: 3px solid rgba(255, 255, 255, 0.75);
border-right-width: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.sign-up {
margin-left: auto;
padding: 5px;
border: 3px solid rgba(255, 255, 255, 0.75);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.div-title {
width: 50vw;
position: absolute;
margin-left: 20vw;
margin-top: 75px;
color: grey;
}
.posts {
width: 50vw;
position: absolute;
margin-left: 20vw;
margin-top: 125px;
}
.post {
width: 100%;
height: 25vh;
border: 1px solid #F2F2F2;
margin-bottom: 20px;
/*box-shadow: 0px 0px 5px #888888;*/
}
.post > .profile {
z-index: 2;
position: absolute;
margin-top: 7vh;
margin-left: 20px;
}
.post > .title {
font-family: 'Roboto Slab', serif;
font-size: 1.5em;
margin-left: 100px;
margin-top: 15px;
}
.post > .content {
margin-left: 100px;
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top" role="banner">
<div class="container">
<div class="nav-item1 header-item">
<div class="logo">Logo</div>
<div class="search">
<input type="text" class="search-field" name="search" placeholder="Search...">
</div>
</div>
<div class="nav-item2 header-item">
<ul class="nav">
<li class="nav-item">New</li>
<li class="nav-item">Home</li>
<li class="nav-item">Explore</li>
</ul>
</div>
<div class="nav-item3 header-item">
<div class="sign">
<div class="sign-in">Sign In</div>
<div class="sign-up">Sign Up</div>
</div>
</div>
</div>
</div>你能给我一个取消“传送”的解决方案或者给我一个让它看起来更平滑的技巧吗？
最佳答案
设置宽度动画的最简单方法是将宽度设置为 100%，然后改为设置最大宽度动画。
另外，addClass/removeClass 而不是直接使用 jQuery 动画是个好主意
这是我在 CSS 中更改/添加的内容。然后javascript只添加.expand
.search-field {
width:100%;
max-width:130px;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.3);
background-image: url('https://cdn.rawgit.com/encharm/Font-Awesome-SVG-PNG/b7f74631/black/png/24/search.png');
background-position: 3px 3px;
background-repeat: no-repeat;
padding: 6px 20px 6px 40px;
transition: max-width 0.4s ease-in-out;
}
.search-field.expand{
max-width:500px;
}
看看这个片段:
$(".search-field").focus(function () {
$(this).addClass('expand');
});
$(".search-field").focusout(function () {
$(this).removeClass('expand');
// $(".logo").fadeIn();
});@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
z-index: 1;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after,
*:first-letter,
*:first-line {
background: transparent !important;
color: #000 !important; /* Black prints faster:
http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/* ==========================================================================
Real CSS
========================================================================== */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
line-height: 1.5;
}
.top {
position: fixed;
height: 50px;
/*padding: 12px;*/
width: 100vw;
background-color: #24292e;
color: rgba(255, 255, 255, 0.75);
z-index: 10;
}
.container {
padding-top: 2px;
width: 980px;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0
}
.nav-item {
padding: 12px;
float: left;
list-style: none;
}
.logo {
flex: unset;
}
.header-item {
display: flex;
flex-direction: row;
}
.nav-item1 {
width: 300px;
justify-content: space-around;
}
.nav-item3 {
width: 300px;
justify-content: space-between;
}
.search-field {
width:100%;
max-width:130px;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.3);
background-image: url('https://cdn.rawgit.com/encharm/Font-Awesome-SVG-PNG/b7f74631/black/png/24/search.png');
background-position: 3px 3px;
background-repeat: no-repeat;
padding: 6px 20px 6px 40px;
transition: max-width 0.4s ease-in-out;
}
.search-field.expand{
max-width:500px;
}
.sign {
display: flex;
flex-direction: row;
}
.sign-in {
margin-left: auto;
padding: 5px;
border: 3px solid rgba(255, 255, 255, 0.75);
border-right-width: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.sign-up {
margin-left: auto;
padding: 5px;
border: 3px solid rgba(255, 255, 255, 0.75);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.div-title {
width: 50vw;
position: absolute;
margin-left: 20vw;
margin-top: 75px;
color: grey;
}
.posts {
width: 50vw;
position: absolute;
margin-left: 20vw;
margin-top: 125px;
}
.post {
width: 100%;
height: 25vh;
border: 1px solid #F2F2F2;
margin-bottom: 20px;
/*box-shadow: 0px 0px 5px #888888;*/
}
.post > .profile {
z-index: 2;
position: absolute;
margin-top: 7vh;
margin-left: 20px;
}
.post > .title {
font-family: 'Roboto Slab', serif;
font-size: 1.5em;
margin-left: 100px;
margin-top: 15px;
}
.post > .content {
margin-left: 100px;
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top" role="banner">
<div class="container">
<div class="nav-item1 header-item">
<div class="logo">Logo</div>
<div class="search">
<input type="text" class="search-field" name="search" placeholder="Search...">
</div>
</div>
<div class="nav-item2 header-item">
<ul class="nav">
<li class="nav-item">New</li>
<li class="nav-item">Home</li>
<li class="nav-item">Explore</li>
</ul>
</div>
<div class="nav-item3 header-item">
<div class="sign">
<div class="sign-in">Sign In</div>
<div class="sign-up">Sign Up</div>
</div>
</div>
</div>
</div>关于javascript - flex 盒和动画有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43163499/