Можно ли анимировать падения круга из-за верхней границы инпута и превращения в лупу?

Question

[NATASHA_PULIMET]

Здраствуйте, хочу сделать анимацию при нажатии на инпут. круг падает из-за верхней границы инпута и трансформируется в лупу. Изначально я думал, что это просто, но сейчас понял, что я даже не могу додуматься как этот круг спрятать LMAO.

"что это вообще за верхняя граница?"

html:

<div class="search__game">
                <input type="text">
                <button class="circle"></button>
 </div>

css:

.search__game{
    display: flex;
    justify-content: center;
    width: 1110px;
    background-color: #131313;
    margin: 52px auto;
}
   

.search__game input{
    width: 100%;
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0);
    padding: 15px 71px 15px 25px;
    color: #ffffff;
    transition: box-shadow, .5s ;
    
}
.search__game input.active{
    box-shadow: 1px 1px 15px 0px rgba(0, 0, 0);
}
.circle{
    
    position: relative;
    right: 47px;
    bottom: 2px;
    color: var(--main-color);
}
.circle:before {
    content: ' \25CF';
    font-size: 51px;
  }

js:

$( document ).ready(function() {
  
$( ".search__game input" ).on( "focus", function() {
    
    $(".circle").addClass("active")
    $( ".search__game input" ).addClass("active")
  })
  $( ".search__game input" ).on( "blur", function() {
    $( this ).removeClass()
  })
})

структуру можно переписать p.s. я ещё тот фронтендер.
p.s.x2. не знаю на сколько сложно реализовать данную анимацию, поэтому сложность дефолтная.

Answer 1

[Павел]

Обертку в релатив и оверфолов хайден, лупу в абслют, за обертку, например top: -40px
при класе актив - лупу показываете там где нужно, например top: 25px, чтобы плавненько, транзишн добавьте

Comments

[NATASHA_PULIMET]

В целом почти оно, но есть нюанс. Если у родителя не убирать overflow, круга не видно, а иначе выглядит странно.

.circle{
    
    position: relative;
    overflow: hidden;
    color: var(--main-color);
}
.circle::before {
    position: absolute;
    content: ' \25CF';
    font-size: 51px;
    top: -10px;
    right: 37px;
    transition: .7s;
  }
  .circle.active{
    overflow: visible;
  }
  .circle.active::before {
    top: 0;
  }