Проблема движущегося изображения с анимацией панели поиска - PullRequest
Новая
       70

Проблема движущегося изображения с анимацией панели поиска

0 голосов
/ 28 января 2020

У меня есть панель поиска, когда фокус перемещается вверх с анимацией
Я хочу то же самое с изображением, расположенным в верхней части панели поиска ...
, чтобы при нажатии на строку поиска изображение уменьшалось и перемещалось в левом верхнем углу и панель поиска движется вверх в синхронном режиме c анимация.

сейчас мне удалось переместить панель поиска, но застрял в части изображения ...
Я пытаюсь определить фокус с помощью 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

1 Ответ

1 голос
/ 28 января 2020

без 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;
}
...