Question

我正在为搜索输入字段做动画。当它进入时，我将它变得更大：当它不在时焦点和更小：焦点并且它工作正常我在页面加载时发生的动画有问题，当它不在焦点时。我知道我可以通过在输入字段中进行自动对焦来解决它。这是一个JsFiddle：
HTML：

<body>
<!--menu start here-->
    <div class="menu">
        <div class="logo">
        Logo goes here
        </div>
        <div class="search">
            <input type="search" class="bar">
            <input type="submit" class="submit">
        </div>
        <ul class="ul">
            <li class="menuitem"><a href="#">Link 1</a></li>
            <li class="menuitem"><a href="#">Link 2</a></li>
            <li class="menuitem"><a href="#">Link 3</a></li>
        </ul>
    </div>
<!--menu end here-->
</body>

这是css：

html,body{
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
.menu{
    width:100%;
    height:50px;
    position:fixed;
    top:0;
    margin:0;
    background:#e6e6e6;
}
.logo{
    float:left;
    height:50px;
    width:250px;
    border-right:2px solid white;
}
.search{
    display:inline;
    float:left;
    padding:10px;
}
.bar{
    display:inline;
    width:150px;
    padding:2px;
    border-radius:5px;
    background:#e6e6e6;
    border:1px solid #ccc;
}
.bar:focus{
    outline:none;
    width:250px;
    animation-name:wider;
    animation-duration:0.5s;
    padding:7px;
    background:white;
}
.bar:not(:focus){
    animation-name:tighter;
    animation-duration:0.5s;
    display:inline;
    width:150px;
    padding:2px;
    border-radius:5px;
    background:#e6e6e6;
}
.submit{
    padding:7px;
    display:inline;
    background-color:green;
    border-radius:5px;
    border:1px solid green;
    color:lightgreen;
    cursor:pointer;
}
.submit:focus{
    outline:none;
}
.ul{
    float:right;
    display:inline;
}
.menuitem{
    display:inline;
}
.menuitem>a{
    padding:15px;
    text-decoration:none;
    color:#7a7a7a;
}
.menuitem>a:hover{
    background:#5c5c5c;
    color:#e6e6e6;
}
@keyframes wider{
    from{
        width:150px;
        padding:2px;
        background:#e6e6e6;
    }
    to{
        background:white;
        width:250px;
        padding:7px;
    }
}
@keyframes tighter{ 
    from{
        background:white;
        width:250px;
        padding:7px;
    }
    to{
        width:150px;
        padding:2px;
        background:#e6e6e6;
    }
}

或者如果您更喜欢代码片段：

html,body{
	padding:0;
	margin:0;
	height:100%;
	width:100%;
}
.menu{
	width:100%;
	height:50px;
	position:fixed;
	top:0;
	margin:0;
	background:#e6e6e6;
}
.logo{
	float:left;
	height:50px;
	width:250px;
	border-right:2px solid white;
}
.search{
	display:inline;
	float:left;
	padding:10px;
}
.bar{
	display:inline;
	width:150px;
	padding:2px;
	border-radius:5px;
	background:#e6e6e6;
	border:1px solid #ccc;
}
.bar:focus{
	outline:none;
	width:250px;
	animation-name:wider;
	animation-duration:0.5s;
	padding:7px;
	background:white;
}
.bar:not(:focus){
	animation-name:tighter;
	animation-duration:0.5s;
	display:inline;
	width:150px;
	padding:2px;
	border-radius:5px;
	background:#e6e6e6;
}
.submit{
	padding:7px;
	display:inline;
	background-color:green;
	border-radius:5px;
	border:1px solid green;
	color:lightgreen;
	cursor:pointer;
}
.submit:focus{
	outline:none;
}
.ul{
	float:right;
	display:inline;
}
.menuitem{
	display:inline;
}
.menuitem>a{
	padding:15px;
	text-decoration:none;
	color:#7a7a7a;
}
.menuitem>a:hover{
	background:#5c5c5c;
	color:#e6e6e6;
}
@keyframes wider{
	from{
		width:150px;
		padding:2px;
		background:#e6e6e6;
	}
	to{
		background:white;
		width:250px;
		padding:7px;
	}
}
@keyframes tighter{	
	from{
		background:white;
		width:250px;
		padding:7px;
	}
	to{
		width:150px;
		padding:2px;
		background:#e6e6e6;
	}
}

<body>
<!--menu start here-->
	<div class="menu">
		<div class="logo">
		Logo goes here
		</div>
		<div class="search">
			<input type="search" class="bar">
			<input type="submit" class="submit">
		</div>
		<ul class="ul">
			<li class="menuitem"><a href="#">Link 1</a></li>
			<li class="menuitem"><a href="#">Link 2</a></li>
			<li class="menuitem"><a href="#">Link 3</a></li>
		</ul>
	</div>
<!--menu end here-->
</body>

当页面首次加载时，您可以看到动画正在发生。反正只有使用css吗？如果不是我不介意使用javascript或jQuery（我在他们两个都很体面）

Answer 1

现在导致问题的是，由于.bar:not(:focus)将立即处于“活动状态”，因此会立即触发更紧密的动画。

我还会说使用关键帧动画来完成你想要实现的目标有点过分。一个简单的css3过渡将是充足的，也不会导致你看到的问题：

.bar{
    display:inline;
    width:150px;
    padding:2px;
    border-radius:5px;
    background:#e6e6e6;
    border:1px solid #ccc;
    transition: all .5s; /* Transition animates everything that's specified in .bar:focus */
}
.bar:focus{
    outline:none;
    width:250px;
    padding:7px;
    background:white;
}

https://jsfiddle.net/3pk1ydvz/

Answer 2

您是否尝试过使用：blur而不是：focus？

您是否为每个网络浏览器指定了转场？

实施例

    #id_of_element {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

转型中的“全部”属于高度，不透明度和易用性。因此属性将全部转换为1s（如上面的代码所示）

Answer 3

尝试过渡而不是动画。

你不需要.bar：not（focus），这与.bar基本相同

html,body{
	padding:0;
	margin:0;
	height:100%;
	width:100%;
}
.menu{
	width:100%;
	height:50px;
	position:fixed;
	top:0;
	margin:0;
	background:#e6e6e6;
}
.logo{
	float:left;
	height:50px;
	width:250px;
	border-right:2px solid white;
}
.search{
	display:inline;
	float:left;
	padding:10px;
}
.bar{
	display:inline;
	width:150px;
	padding:2px;
	border-radius:5px;
  border:1px solid #ccc;
	background:#e6e6e6;
  transition:all ease 0.5s;
}

.bar:focus{
	outline:none;
	width:250px;
	padding:7px;
	background:white;
}
.submit{
	padding:7px;
	display:inline;
	background-color:green;
	border-radius:5px;
	border:1px solid green;
	color:lightgreen;
	cursor:pointer;
}
.submit:focus{
	outline:none;
}
.ul{
	float:right;
	display:inline;
}
.menuitem{
	display:inline;
}
.menuitem>a{
	padding:15px;
	text-decoration:none;
	color:#7a7a7a;
}
.menuitem>a:hover{
	background:#5c5c5c;
	color:#e6e6e6;
}

<body>
<!--menu start here-->
	<div class="menu">
		<div class="logo">
		Logo goes here
		</div>
		<div class="search">
			<input type="search" class="bar">
			<input type="submit" class="submit">
		</div>
		<ul class="ul">
			<li class="menuitem"><a href="#">Link 1</a></li>
			<li class="menuitem"><a href="#">Link 2</a></li>
			<li class="menuitem"><a href="#">Link 3</a></li>
		</ul>
	</div>
<!--menu end here-->
</body>

更新了jsfiddle：jsfiddle.net/dj33n5js/3

Answer 4

您应该将初始样式应用于.bar元素。据我所知，.bar本身的样式应与.bar:not(focus)上的样式相同。

css动画运行时不：焦点，但也加载页面

4 个答案:

您是否尝试过使用：blur而不是：focus？