alpinejs+gsap+Flip实现数据列表过滤筛选动态效果代码-html代码-BFW代码库

alpinejs+gsap+Flip实现数据列表过滤筛选动态效果代码

代码语言：html

所属分类：其他

代码描述：alpinejs+gsap+Flip实现数据列表过滤筛选动态效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  background: #222831;
}

.grid {
  margin: 4rem auto;
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  width: 720px;
  max-width: calc(100% - 8rem);
}

button {
  width: 100%;
  appearance: none;
  border-radius: .25rem;
  border: 0;
  padding: 1rem 2rem;
  background: #00ADB5;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  font-family: system-ui;
  cursor: pointer;
}

div div {
  height: 100px;
  width: 100%;
  background: #393E46;
  border-radius: .25rem;
  width: calc((100% / 3) - (1rem / 3 * 2));
  display: none;
}

div .expand {
   width: calc((100% / 3 * 2) - (1rem / 3 * 1));
}

div .clickable {
  background-image: linear-gradient(45deg, #00adb5 25%, #393e46 25%, #393e46 50%, #00adb5 50%, #00adb5 75%, #393e46 75%, #393e46 100%);
  background-size: 56.57px 56.57px;
  cursor: pointer;
}

div .show {
  display: block;
}
</style>


</head>

<body >
  <div class="grid" x-data="{show: true}">
  <button x-on:click="
                      state = Flip.getState('.grid, .grid > *');
                      show = !show;
                      await $nextTick();
                      Flip.from(state, { duration: .2, ease: 'power1.inOut', absolute: true, stagger: 0.02, onEnter: elements => gsap.fromTo(elements, {opacity: 0, scale: 0}, {opacity: 1, scale: 1, duration: .2}), onLeave: elements => gsap.to(elements, {opacity: 0, sca.........完整代码请登录后点击上方下载按钮下载查看