Tengo una sección de header que contiene un icono de búsqueda. Cuando se hace clic en este ícono, quiero que mi barra de búsqueda se deslice desde la parte superior. Cuando esté cerrado, quiero que se deslice hacia arriba.
Corrientemente:
Manifestación:
$(function() { function slideDown(){ var element = $(".header__searchBar"); var tl = new TimelineLite(); tl.to(element, 1, { top: 0, autoAlpha: 1 }); /* tl.from(element, 1, { top: "-100%", autoAlpha: 1 }); */ } $(".header__searchIcon").click(function() { $(".header__searchBar").toggleClass("active"); slideDown(); }); }); .header { position: relative; padding: 20px 0; } .header__searchIcon { position: relative; z-index: 99; cursor: pointer; } .header__searchBar { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; color: white; } .header__searchBar.active { z-index: 10; background-color: #5F249F; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div class="header"> <div class="container"> <div class="row"> <div class="col-2"> LOGO </div> <div class="col-8"> MENU </div> <div class="col-2"> <div class="header__searchIcon"> Click me </div> </div> </div> </div> <div class="header__searchBar"> SEARCH FORM HERE </div> </div>Acabo de jugar y lo hice funcionar:
https://codepen.io/ryanowalls/pen/bGozVpy
Creo que la razón principal por la que parece que no se está deslizando hacia arriba es porque el color de fondo púrpura solo está configurado en su clase 'activa'. Esto significa que la barra de búsqueda se vuelve blanca antes de que se pueda ver la animación.
Actualizaciones de CSS:
.header__searchBar { position: absolute; top: 0; left: 0; transform: translateY(-100%); width: 100%; height: 100%; color: white; background-color: #5F249F; }Actualizaciones de JavaScript:
$(function() { function toggleSearch(){ var element = $(".header__searchBar"); // check if search bar is open already var active = element.hasClass("active"); if(active) { // close search bar gsap.to(element, {'transform': 'translateY(-100%)'}); } else { // open search bar gsap.to(element, {'transform': 'translateY(0%)'}); } $(".header__searchBar").toggleClass("active"); } $(".header__searchIcon").click(function() { toggleSearch(); }); });