transition简单使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .div{
      transition: 1s;
      width: 10px;
      height: 200px;
      background-color: aqua;

    }
    .div:hover{
      margin-top:100px;
      width:100px;
      background: #000;
    }
  </style>

</head>
<body>

  <div
    class="div"
    style=""
  ></div>

  <button >点击</button>
<script>
  function $(el){
      return document.querySelectorAll(el);
  }
  $('button')[0].onclick=function(){

    var div =$('div')[0];

    if (div.style.marginTop == "100px") {

      div.style.marginTop = "0px"
    }else {

      div.style.marginTop = "100px"

    }

  }


</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容