带有搜索栏动画的移动图像问题答案

【问题标题】：Problem moving image with search bar animation带有搜索栏动画的移动图像问题
【发布时间】：2020-01-28 15:23:01
【问题描述】：

当焦点随着动画向上移动时，我有一个搜索栏
我希望将图片放在搜索栏顶部...
这样当我们点击搜索栏时，图片会变小并在左上角移动，搜索栏会同步动画向上移动。

现在我已经设法移动搜索栏但卡在图像部分...
我正在尝试使用 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>

这里是codepen

【问题讨论】：

标签： javascript html css css-animations css-transitions

【解决方案1】：

没有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;
}

【讨论】：

谢谢但是为什么当我们尝试在焦点+部分中添加宽度和高度时，高度和宽度没有动画效果
因为我没有改变高度或宽度。你可以放任何你想要的东西，它会改变
是的，我确实添加了宽度和高度，但它们并没有平滑地改变大小...here
要使过渡影响您需要在两个选择器中设置样式参数。如果您将在第一个 #homeImge 选择器中设置宽度和高度，则转换将具有参考并起作用。