如何控制css轉換？

Question

我正在創建一個搜索條，它接受來自用戶的搜索條件。我插入了一個CSS轉換（它的寬度增加了點擊）。我面臨的問題是當我點擊提交按鈕時搜索欄的寬度減小。我不希望發生這種情況，搜索欄應保留其更改的寬度。 下面是HTML：

<input type="text" placeholder=" search" id="search"> 
    <button type="submit" id="submit" >submit </button> 
</form> 

這裏是CSS：

input[type=text] { 
width: 130px; 
box-sizing: border-box; 
border: 2px solid black; 
border-radius: 4px; 
font-size: 16px; 
background-color: white; 
background-image: url("http://icons.iconarchive.com/icons/ampeross/qetto-2/256/search-icon.png"); 
background-size:40px; 
/*background-position: 10px 10px;*/ 
background-repeat: no-repeat; 
padding: 12px 20px 12px 40px; 
-webkit-transition: width 0.4s ease-in-out; 
transition: width 0.4s ease-in-out; 
margin-left:7%; 
} 

input[type=text]:focus { 
width: 75%; 
} 

這裏是鏈接到我的代碼，如果它有助於： https://codepen.io/ryoko1/pen/eRMYrg?editors=1111

Answer 1

我面臨的問題是，當我點擊提交按鈕的搜索欄的寬度減小。

這是因爲只要input losses它focus它decrease這是input width回最初分配或默認寬度。這種情況甚至發生在當你在頁面的其他地方click不僅submit button而且原因是它從輸入丟失焦點。因此請使用jQuery click（）方法。

$("input[type='text']").on("click",function(){ 
    $(this).css("width","75%"); 
}); //Add this to your jQuery 

$(document).ready(function() { 
 
    var url = "https://cors-anywhere.herokuapp.com/https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=bill gates"; 
 

 
    $.getJSON(url, function(data) { 
 
// console.log(data[1]); 
 
    }); 
 
    $("#submit").click(function() { 
 
    // document.getElementById("demo").innerHTML("hello"); 
 
    // console.log("hello"); 
 
    }); 
 
    $("input[type='text']").on("click", function() { 
 
    $(this).css("width", "75%"); 
 
    }); 
 
});

body { 
 
    background-color: black; 
 
    background-repeat: no-repeat; 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikipedia-logo-en-big.png/800px-Wikipedia-logo-en-big.png"); 
 
} 
 

 
h1 { 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
input[type=text] { 
 
    width: 130px; 
 
    box-sizing: border-box; 
 
    border: 2px solid black; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    background-color: white; 
 
    background-image: url("http://icons.iconarchive.com/icons/ampeross/qetto-2/256/search-icon.png"); 
 
    background-size: 40px; 
 
    background-repeat: no-repeat; 
 
    padding: 12px 20px 12px 40px; 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out .1s; 
 
    margin-left: 7%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1> Wikipedia Viewer</h1> 
 
<form> 
 
    <input type="text" placeholder=" search" id="search"> 
 
    <button type="submit" id="submit">submit </button> 
 
</form> 
 
<p id="demo"></p>

Answer 2

您可以使用躍遷延遲（設爲100ms）：

transition: width 0.4s ease-in-out .1s; 

f上的附加復位延遲ocused元素：

input[type=text]:focus { 
    transition-delay: 0s; 
}