使用GSAP实现滑入和滑出效果

Question

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

目前：

1. 我的搜索栏在初次单击时向下滑动，但当单击"；再次点击我"；，它不会向后滑动
2. 一旦你点击了两次图标，在第三个例子中，当你试图滑入菜单时(第一次点击时有效(，它不会滑入，只是出现

演示：

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

我认为它看起来没有向后滑动的主要原因是紫色背景颜色只设置在你的"活跃"类上。这意味着搜索栏在动画消失之前会变成白色。

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