Membuat Animasi Search Menggunakan Jquery

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan Membuat Animasi Search Menggunakan Jquery. Dimana tampilan tombol search ini akan saya buat menggunakan tag input yang berbentuk bulat dan tombol yang berbentuk line. Jika di klik maka input yang berbentuk bulat akan memanjang. Langkah pertama untuk dapat Membuat Animasi Search Menggunakan Jquery yaitu saya akan membuat struktur htmlnya seperti berikut ini.

<form id="content">
      <input type="text" name="input" class="input" placeholder="Cari">
      <button type="reset" class="search"></button>
    </form>

Jika sudah maka tahap selanjutnya saya akan membuat style css masih didalam file yang sama dengan html seperti di bawah ini.

    <style>
    
    body {
        background: salmon;
        background-size: cover;
        color: #fff;
        margin: 0;
        overflow:hidden;
}

    #content {
      position: absolute;
      height: 50px;
      width: 300px;
      margin-left: 465px;
      margin-top: -131px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #content.on {

      animation-name: in-out;   
      animation-duration: 0.7s;   
      animation-timing-function: linear;
      animation-iteration-count: 1;
    }

    input {
      box-sizing: border-box;
      width: 50px;
      height: 50px;
      border: 4px solid #FFFFFF;
      border-radius: 50%;
      background: none;
      color: #fff;
      font-size: 16px;
      font-weight: 400;
      font-family: Roboto;
      outline: 0;      
      transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;       
      transition-delay: 0.4s;      
      transform: translate(-100%, -50%);
      padding: 6px;
    }

    .search {
      background: none;
      position: absolute;
      top: 0px;
      left: 0;
      height: 50px;
      width: 50px;
      padding: 0;
      border-radius: 100%;
      outline: 0;
      border: 0;
      color: inherit;
      cursor: pointer;       
      transition: 0.2s ease-in-out;    
      transform: translate(-100%, -50%);
    }

    .search:before {
      content: "";
      position: absolute;
      width: 20px;
      height: 4px;
      background-color: #fff;      
      transform: rotate(45deg);
      margin-top: 26px;
      margin-left: 17px;      
      transition: 0.2s ease-in-out;
    }

    .close {     
      transition: 0.4s ease-in-out;      
      transition-delay: 0.4s;
    }

    .close:before {
      content: "";
      position: absolute;
      width: 27px;
      height: 4px;
      margin-top: -1px;
      margin-left: -13px;
      background-color: #fff;       
      transform: rotate(45deg);    
      transition: 0.2s ease-in-out;
    }

    .close:after {
      content: "";
      position: absolute;
      width: 27px;
      height: 4px;
      background-color: #fff;
      margin-top: -1px;
      margin-left: -13px;
      cursor: pointer;      
      transform: rotate(-45deg);
    }

    .square {
      box-sizing: border-box;
      padding: 0 40px 0 10px;
      width: 300px;
      height: 50px;
      border: 4px solid #FFFFFF;
      border-radius: 10px;
      background: none;
      color: #fff;
      font-family: Roboto;
      font-size: 16px;
      font-weight: 400;
      outline: 0;      
      transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;      
      transition-delay: 0.4s, 0s, 0.4s;       
      transform: translate(-100%, -50%);
    }

    </style>

Dan langkah terakhir kita akan membuat script jquery untuk menjalankan animasi search yang akan kita buat seperti di bawah ini.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>
function expand() {
  $(".search").toggleClass("close");
  $(".input").toggleClass("square");
  if ($('.search').hasClass('close')) {
    $('input').focus();
  } else {
    $('input').blur();
  }
}
$('button').on('click', expand);
</script>

Demikian artikel tentang cara  Membuat Animasi Search Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba.