文件夹展开交互动画

下载代码

html

css

分享到微信朋友圈

html

<div class="folder" id="js_folder">
  <div class="folder-summary" id="js_toggle-folder">
    <div class="folder-summary__start">
      <button class="folder-collapse-button" id="js_folder-collapse-button">
        <svg id="js_folder-collapse-button-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up">
          <polyline points="18 15 12 9 6 15"></polyline>
        </svg>
      </button>
      <div class="folder-summary__file-count" id="js_folder-summary-amount">
        <span class="folder-summary__file-count__amount">3</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder">
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
        </svg>
      </div>
    </div>
    <div class="folder-summary__details">
      <div class="folder-summary__details__name">
        Portfolio
      </div>
      <div class="folder-summary__details__share">
        Design by
        <a class="shared-user" href="#" rel="noopener noreferrer">
          <svg class="shared-user__avatar" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="12" fill="#1C213E" />
            <circle cx="12" cy="12" fill="#BFBFC0" r="6.168" />
            <circle cx="12.561" cy="11.439" r="5.607" fill="url(#paint0_radial)" fill-opacity=".5" />
            <defs>
              <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(109.486 3.244 10.282) scale(7.73263)">
                <stop stop-color="#758EA9" />
                <stop offset="1" stop-color="#668097" stop-opacity="0" />
              </radialGradient>
            </defs>
          </svg>
          <span class="shared-user__name">7ahang</span>
        </a>
      </div>
    </div>
    <div class="folder-summary__end">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M6 12c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm9 0c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm9 0c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z" /></svg>
    </div>
  </div>

<li class="folder-item js_folder-item">
      <div class="folder-item__icon">
        <svg width="50" height="70" viewBox="0 0 50 70" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M33 0H5a5 5 0 00-5 5v60a5 5 0 005 5h40a5 5 0 005-5V17L33 0z" fill="#36A95E" />
          <path d="M50 29L35 16l15 .867V29z" fill="url(#paint0_linear)" opacity=".1" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M33 0l17 17H38a5 5 0 01-5-5V0z" fill="#A0D0B3" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 60V39h25v21H12zm14-3h8v-3h-8v3zm-3-3v3h-8v-3h8zm3-3h8v-3h-8v3zm-3-3v3h-8v-3h8zm3-3h8v-3h-8v3zm-3-3v3h-8v-3h8z" fill="#fff" fill-opacity=".75" />
          <defs>
            <linearGradient id="paint0_linear" x1="42.5" y1="16" x2="42.5" y2="29" gradientUnits="userSpaceOnUse">
              <stop />
              <stop offset="1" stop-opacity="0" />
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div class="folder-item__details">
        <div class="folder-item__details__name">
          Festival Visual Design.xlsx
        </div>
        <div class="folder-item__details__date">
          Created 2020.5.17
        </div>
      </div>
      <div class="folder-item__size">
        216.5 MB
      </div>
    </li>
    <li class="folder-item js_folder-item">
      <div class="folder-item__icon">
        <svg width="50" height="70" viewBox="0 0 50 70" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M33 0H5a5 5 0 00-5 5v60a5 5 0 005 5h40a5 5 0 005-5V17L33 0z" fill="#E8B52C" />
          <path d="M50 29L35 16l15 .867V29z" fill="url(#paint0_linear)" opacity=".1" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M33 0l17 17H38a5 5 0 01-5-5V0z" fill="#EEDA86" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M34 39H13v21h24V39h-3zM16 54.75h18v-10.5H16v10.5z" fill="#fff" fill-opacity=".75" />
          <defs>
            <linearGradient id="paint0_linear" x1="42.5" y1="16" x2="42.5" y2="29" gradientUnits="userSpaceOnUse">
              <stop />
              <stop offset="1" stop-opacity="0" />
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div class="folder-item__details">
        <div class="folder-item__details__name">
          Portfolio 2020.ppt
        </div>
        <div class="folder-item__details__date">
          Created 2020.6.7
        </div>
      </div>
      <div class="folder-item__size">
        25.8 MB
      </div>
    </li>
  </ul>
</div>

css

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&display=swap");
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background: #efeff0;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}

.folder {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  width: 450px;
}

.shared-user {
  -webkit-box-align: center;
          align-items: center;
  color: #6a696a;
  display: -webkit-inline-box;
  display: inline-flex;
  font-weight: 500;
  margin-left: 5px;
  outline: none;
  text-decoration: none;
}
.shared-user__avatar {
  width: 15px;
  height: 15px;
  margin-right: 3px;
}

.folder-summary {
  padding: 15px 20px 15px 15px;
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  line-height: 1;
  height: 80px;
  position: relative;
}
.folder-summary__start {
  position: relative;
}
.folder-summary__file-count {
  position: absolute;
  top: -3px;
}
.folder-summary__file-count__amount {
  color: #ffffff;
  font-size: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.folder-summary__file-count svg {
  color: #5166fa;
  height: 30px;
  width: auto;
}
.folder-summary__details {
  padding: 2px 0 0 13px;
}
.folder-summary__details__name {
  color: #393738;
  font-size: 20px;
  font-weight: 500;
}
.folder-summary__details__share {
  -webkit-box-align: center;
          align-items: center;
  color: #b5b4b5;
  display: -webkit-box;
  display: flex;
  font-size: 15px;
  margin-top: 8px;
}
.folder-summary__end {
  margin-left: auto;
}
.folder-summary__end svg {
  fill: #c3c2c3;
}
.folder-summary::after {
  background: #e6e6e6;
  bottom: -2px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}

.folder-collapse-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border-radius: 30px;
  border: 0;
  cursor: pointer;
  height: 30px;
  opacity: 0;
  outline: none;
  position: absolute;
  position: relative;
  width: 30px;
  z-index: 1;
}
.folder-collapse-button::after {
  background: #efeff0;
  border-radius: 40px;
  content: "";
  height: 35px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  width: 35px;
}
.folder-collapse-button:hover::after {
  opacity: 1;
}
.folder-collapse-button svg {
  color: #9c9c9e;
  left: 50%;
  position: absolute;
  stroke-width: 3;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}

.folder-item {
  -webkit-box-align: start;
          align-items: flex-start;
  display: -webkit-box;
  display: flex;
  height: 80px;
  line-height: 1;
  opacity: 0;
  padding: 20px 25px;
  position: relative;
}
.folder-item__icon svg {
  display: block;
  height: 40px;
  width: auto;
}
.folder-item__details {
  padding: 1px 0 0 15px;
}
.folder-item__details__name {
  color: #393738;
  font-size: 17px;
  font-weight: 500;
  position: relative;
}
.folder-item__details__name svg {
  height: auto;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(5px, calc(-50% + 1px));
          transform: translate(5px, calc(-50% + 1px));
  width: 20px;
}
.folder-item__details__date {
  color: #b5b4b5;
  font-size: 15px;
  margin-top: 8px;
}
.folder-item__size {
  color: #6a696a;
  font-weight: 500;
  margin-left: auto;
  margin-top: 2px;
}
.folder-item:not(:last-child)::after {
  background: #edecee;
  bottom: 0;
  content: "";
  height: 1px;
  left: 80px;
  position: absolute;
  right: 0;
}

JavaScript

const toggleFolder = document.getElementById("js_toggle-folder");

// --------- ANIMATION

const showFolderContentAnimation = anime.timeline({
  easing: "easeOutCubic",
  autoplay: false
});

showFolderContentAnimation
  .add({
    targets: "#js_folder-content",
    height: [0, 240],
    duration: 350
  })
  .add(
    {
      targets: "#js_folder-summary-amount",
      opacity: [1, 0],
      duration: 400
    },
    "-=350"
  )
  .add(
    {
      targets: "#js_folder-collapse-button",
      opacity: [0, 1],
      duration: 400
    },
    "-=300"
  )
  .add(
    {
      targets: "#js_folder-collapse-button-icon",
      duration: 300,
      translateX: ["-50%", "-50%"],
      translateY: ["-50%", "-50%"],
      rotate: ["0deg", "180deg"]
    },
    "-=400"
  )
  .add(
    {
      targets: ".js_folder-item",
      translateY: [20, 0],
      opacity: [0, 1],
      duration: 300,
      delay: (el, i, l) => i * 120
    },
    "-=275"
  );

// --------- TRIGGER

toggleFolder.addEventListener("click", () => {
  if (showFolderContentAnimation.began) {
    showFolderContentAnimation.reverse();
    if (
      showFolderContentAnimation.progress === 100 &&
      showFolderContentAnimation.direction === "reverse"
    ) {
      showFolderContentAnimation.completed = false;
    }
  }

if (showFolderContentAnimation.paused) {
    showFolderContentAnimation.play();
  }
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg