当焦点向上移动时，我有一个搜索栏，我希望与
放置在搜索栏顶部的图像相同......
这样，当我们单击搜索栏图像变小并在左上角移动时，搜索栏在同步动画中向上移动。
现在我已经设法移动了搜索栏，但卡在了图像部分......
我正在尝试使用 JS 检测焦点，然后也对图像进行过渡，但左边距和下边距不起作用......
任何人都可以帮助完成它吗？
var input = document.getElementById("SearchBar");
var homeImage = document.getElementById("homeImage");
input.addEventListener("focus", function () {
homeImage.classList.add('horizTranslate');
});#SearchBar {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40%;
box-sizing: border-box;
border: 3px solid;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('search-icon.svg');
background-position: 10px 10px;
background-repeat: no-repeat;
border-color: #ffaf7b;
padding: 12px 20px 12px 40px;
transition: width 0.8s ease, top 0.5s ease, border-color 0.5s ease;
}
#homeImage {
position: absolute;
top: 28%;
left: 45%;
}
#SearchBar:focus {
width: 90%;
top: 22%;
border-color: #ff512f;
}
.horizTranslate {
transition: 3s;
margin-right: 50%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input id="SearchBar" placeholder="XXXXX...">
<img src="https://via.placeholder.com/150" src="pattern-img.png" alt="Girl in a jacket" id="homeImage"><script src="ui.js" type="text/javascript"></script>
</body>
</html>这是代码笔
没有 JavaScript
.CSS：
#SearchBar {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40%;
box-sizing: border-box;
border: 3px solid;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("search-icon.svg");
background-position: 10px 10px;
background-repeat: no-repeat;
border-color: #ffaf7b;
padding: 12px 20px 12px 40px;
transition: width 0.8s ease, top 0.5s ease, border-color 0.5s ease;
}
#homeImage {
position: absolute;
top: 28%;
left: 45%;
transition: 1s;
}
#SearchBar:focus {
width: 90%;
top: 22%;
border-color: #ff512f;
transition: 1s;
margin-right: 50%;
}
#SearchBar:focus+#homeImage {
top: 0;
left: 80%;
transition: 1s;
}