Html 点击按钮时的CSS转换-代码笔示例_Html_Css_Codepen

Html 点击按钮时的CSS转换-代码笔示例

html css

Html 点击按钮时的CSS转换-代码笔示例,html,css,codepen,Html,Css,Codepen,我有一个按钮，可以在presentbox上方添加图像。它有两帧-presentbox和按下按钮时其上方的图像图像刚好“弹出”到盒子上方。我希望图像（在本例中为卡车）从presentbox平稳过渡，并从箱子/卡车现在的相同位置向上稍微过渡。我怎么做 Codepen提供了一个简单的示例：因为您没有编辑任何CSS属性。您只是用JavaScript创建了一个新元素您有两个选项：创建元素并使用javascript设置其动画，或者，更简单的一个选项，将元素放置在页面中并设置其高度动画，例如，使其显示

我有一个按钮，可以在presentbox上方添加图像。它有两帧-presentbox和按下按钮时其上方的图像

图像刚好“弹出”到盒子上方。我希望图像（在本例中为卡车）从presentbox平稳过渡，并从箱子/卡车现在的相同位置向上稍微过渡。我怎么做

Codepen提供了一个简单的示例：

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

您有两个选项：创建元素并使用javascript设置其动画，或者，更简单的一个选项，将元素放置在页面中并设置其高度动画，例如，使其显示。下面是您的代码，将一个类切换到truck div，它会根据其类列表显示或消失：


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


点击
函数myFunction（）{
document.getElementById（“truck”）.classList.toggle（“可见”）；
}
#卡车{
身高：0；
过渡：所有的1容易；
}
#卡车。可见{
高度：280px；
}

您只是简单地将

添加到

单击中，这不会给您预期的效果。一种方法是将

添加到主体，将

过渡：所有1s

添加到帧间平滑，并使用CSS使用

不透明度：0

或

位置：绝对，左：-100px

隐藏图像。然后单击，撤消“隐藏”方法。

.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;
        }


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