单击按钮时的 CSS 转换 - CodePen 示例

如何解决单击按钮时的 CSS 转换 - CodePen 示例

我有一个按钮，可以在展示框上方添加图像。它是 2 帧 - 展示框，以及按下按钮时其上方的图像。

图像只是在框上方“弹出”。我希望图像（在这种情况下，卡车）从礼物盒平滑过渡，并从盒子/卡车现在的相同位置向上过渡。我该怎么做？

Codepen 一个简单的例子：

      function myFunction() {
        document.getElementById("truck").innerHTML = `
    <img    src="https://i.pinimg.com/originals/e0/8b/14/e08b1415885d4d2ddd7fd3f75967da29.png"></img>`
        console.log(this.show)
      }

    </script>
  </head>
  <body>
    <div id ="truck"></div>
  <img class="Box" src="https://img.pngio.com/png-file-svg-Box-icon-vector-png-transparent-cartoon-free-Box-icon-png-920_852.png" on-click="handleClick"></img>
    <button onclick="myFunction()">Click</button>
  </body>
</html>

CSS：

.header {
          display: flex;
          align-items: center;
        }

        .circle {
          height: 36px;
          width: 36px;
          border-radius: 50%;
          visibility: visible;
          background-color: var(green);

          display: flex;
          align-items: center;
          justify-content: center;
        }

        .icon {
          height: 26px;
          width: 26px;
          line-height: 0;
        }

        .header-text {
          display: flex;
          align-items: center;
          margin-left: 14px;
          height: 48px;
        }

        .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
        }

       img {
          height: 240px;
          width: 250px;
          flex-grow: 0;
        }

        .Box {
          width: 350px;
          height: 350px;
        }

解决方法

因为您没有编辑任何 CSS 属性。您只是使用 JavaScript 创建了一个新元素。

您有两种选择：创建元素并使用 javascript 为其设置动画，或者更简单的方法是将元素放在页面中并为其高度设置动画，例如，使其显示。这是您的代码，其中将一个类切换到卡车 div，它根据其 classList 出现或消失：


<head>
  <link rel="styles.css" />
</head>

<body>
  <div id="truck"><img src="https://i.pinimg.com/originals/e0/8b/14/e08b1415885d4d2ddd7fd3f75967da29.png" class=""></img></div>
  <img class="box" src="https://img.pngio.com/png-file-svg-box-icon-vector-png-transparent-cartoon-free-box-icon-png-920_852.png" on-click="handleClick"></img>
  <button onclick="myFunction()">Click</button>

  <script>
    function myFunction() {
      document.getElementById("truck").classList.toggle("visible");
    }
  </script>
</body>

</html>


#truck {
  height: 0;
  transition: all 1s ease;
}
#truck.visible {
  height: 280px;
}

单击按钮时的 CSS 转换 - CodePen 示例

如何解决单击按钮时的 CSS 转换 - CodePen 示例

解决方法

相关推荐