首页 > 解决方案 > 将 babel 编译后的代码转换成常规的 js

问题描述

我从 codepen 获得了一个示例代码,我想更好地理解它。我注意到 js 代码是用 Babel 编译的。由于我对 JS 很陌生,因此查看标准的 javascript 代码会更舒服,所以我想问您是否有某种方法可以将 babel js 转换为常规 js。我做了一些研究,但我找不到任何东西

顺便说一下,这是 Babel 代码

const parent = document.getElementById("projects");
const closeButton = document.getElementById("project-close");
const projectItems = document.querySelectorAll(".project-item");

closeButton.addEventListener("click", onProjectClose);
projectItems.forEach(item => item.addEventListener("click", onProjectClick));

function onProjectClick(event) {
  const { target } = event;
  const { width, height, top, left } = target.getBoundingClientRect();
  const clone = document.createElement("div");
  clone.style.height = height + "px";
  clone.style.width = width + "px";
  clone.style.top = top + "px";
  clone.style.left = left + "px";
  clone.style.position = "absolute";
  clone.style.zIndex = 10;
  clone.classList.add("project-item");
  clone.classList.add("clone");
  clone.innerHTML = target.innerHTML;
  document.body.appendChild(clone);

  gsap.timeline().
  to(clone, 1.5, {
    position: "fixed",
    top: 0,
    left: 0,
    width: "100%",
    height: "100vh",
    ease: Expo.easeInOut }).

  add(() => document.body.classList.add("project-page")).
  set(clone, {
    overflow: "auto" });

}

function onProjectClose() {
  document.body.classList.remove("project-page");
  const clone = document.querySelector(".clone");
  gsap.to(clone, 1, {
    clipPath: "inset(100% 0 100% 0)",
    ease: Sine.easeInOut,
    onComplete() {
      clone.remove();
    } });

  gsap.to(clone.querySelector("img"), 1, {
    scale: 0.7,
    ease: Sine.easeInOut });

}

标签: javascripthtmlcssbabeljs

解决方案


推荐阅读