使用 GSAP 的滑入和滑出效果

Question

我有一个 header 部分，其中包含一个搜索图标。单击此图标时，我希望我的搜索栏从顶部滑入。当它关闭时，我希望它向后滑动。

目前：

我的搜索栏在初始点击时向下滑动，但是当点击“再次点击我”时，它不会向上滑动。
在您点击该图标两次后，在第三次尝试将菜单滑入（第一次点击时有效）时，它不会滑入，只是出现

演示：

$(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>

Answer 1

我刚刚尝试了一下并开始工作：

https://codepen.io/ryanowalls/pen/bGozVpy

我认为它看起来没有向后滑动的主要原因是紫色背景颜色仅设置在您的 'active' class 上。这意味着搜索栏在动画消失之前会变白。

CSS 更新：

.header__searchBar {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  width: 100%;
  height: 100%;
  color: white;
  background-color: #5F249F;
}

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();
  });
});

使用 GSAP 的滑入和滑出效果

Slide in and out effect using GSAP

html

javascript

css

gsap