jquery – 我的css过渡搜索框无效

2019年7月20日 194次阅读

i want my search input to show after i click on the button,within a transition,but it doesn’t seem to work for me…any help?
this is my code

this is my css section

<style>
#search {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
}
#label {
width: 60px;
height: 60px;
position: relative;
z-index: 20;
background:red;
}
#label label {
display: block;
width: 60px;
height: 60px;
background: url("search.png") 0 0;
font-size: 0;
color: rgba(0, 0, 0, 0);
text-indent: -9999px;
cursor: pointer;
}
#label label:hover {
background: url("search.png") -60px 0
}
#label.active label {
background: url("search.png") -60px 0
}
#input {
position: absolute;
top: 0;
left: 50px;
width: 450px;
height: 60px;
z-index: 5;
overflow: hidden;
background-color:green;
}
#input input {
display: block;
position: absolute;
top: 0;
left: -450px;
width: 450px;
height: 100%;
margin: 0;
padding: 0 10px;
border: none;
background-color: #23688b;
color: #fff;
font-size: 18px;
backface-visibility: none;
border-radius: 0;
transition: position 0.3s ease ;
}
#input input:focus {
outline: none
}
#input.focus {
z-index: 20;
}
#input.focus input {

position: left;
}
</style>

this is the body section

<form id="search" action="#" method="post">
<div id="label"><label for="search-terms" id="search-label">search</label></div>
<div id="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms..."></div>
</form>

and finally this is the script section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
(function(window){

// get vars
var searchEl = document.querySelector("#input");
var labelEl = document.querySelector("#label");

// register clicks and toggle classes
labelEl.addEventListener("click",function(){
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
} else {
classie.add(searchEl,"focus");
classie.add(labelEl,"active");
}
});

// register clicks outisde search box, and toggle correct classes
document.addEventListener("click",function(e){
var clickedID = e.target.id;
if (clickedID != "search-terms" && clickedID != "search-label") {
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
}
}
});
}(window));
</script>

最佳答案 这是你需要的:)

注意：我添加了classie.js外部库.
这会在点击时添加焦点类.并写这个CSS

#input input:focus {
outline: none;
left: 0px;
transition: left 0.3s ease ;
}

显示文本框.

希望这对你有所帮助.

(function(window){

// get vars
var searchEl = document.querySelector("#input");
var labelEl = document.querySelector("#label");

// register clicks and toggle classes
labelEl.addEventListener("click",function(){
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
} else {
classie.add(searchEl,"focus");
classie.add(labelEl,"active");
}
});

// register clicks outisde search box, and toggle correct classes
document.addEventListener("click",function(e){
var clickedID = e.target.id;
if (clickedID != "search-terms" && clickedID != "search-label") {
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
}
}
});
}(window));
#search {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
}
#label {
width: 60px;
height: 60px;
position: relative;
z-index: 20;
background:red;
}
#label label {
display: block;
width: 60px;
height: 60px;
background: url("http://png-4.findicons.com/files/icons/1262/amora/256/find.png") 0 0;
background-size: contain;
font-size: 0;
color: rgba(0, 0, 0, 0);
text-indent: -9999px;
cursor: pointer;
}
#label label:hover {
background: url("http://png-4.findicons.com/files/icons/1262/amora/256/find.png") -60px 0;
background-size: contain;
}
#label.active label {
background: url("http://png-4.findicons.com/files/icons/1262/amora/256/find.png") -60px 0;
background-size: contain;
}
#input {
position: absolute;
top: 0;
left: 50px;
width: 450px;
height: 60px;
z-index: 5;
overflow: hidden;
background-color:green;
}
#input input {
display: block;
position: absolute;
top: 0;
left: -450px;
width: 450px;
height: 100%;
margin: 0;
padding: 0 10px;
border: none;
background-color: #23688b;
color: #fff;
font-size: 18px;
backface-visibility: none;
border-radius: 0;
transition: position 0.3s ease ;
}
#input input:focus {
outline: none;
left: 0px;
transition: left 0.3s ease ;
}
#input.focus {
z-index: 20;
}
#input.focus input {

position: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="search" action="#" method="post">
<div id="label"><label for="search-terms" id="search-label">search</label></div>
<div id="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms..."></div>
</form>
点赞