前端复习--js控制CSS3动画

最新推荐文章于 2024-01-05 13:24:17 发布

原创最新推荐文章于 2024-01-05 13:24:17 发布 · 951 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用CSS和JavaScript实现一个简单的按钮控制DOM元素旋转动画，并加入transition平滑过渡效果。

废话不说，先来个简单的：利用按钮控制旋转（通过控制DOM元素的className属性实现）

<!DOCTYPE html>
<html>
<head>
<style> 
.normal{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
}
.rotate{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
-webkit-transform:rotate(9deg); 
}
</style>
</head>
<body>

<button id="roll">rotate</button>
<div id="td" class="normal"></div>


<script type="text/javascript">
var btn = document.getElementById("roll");
var box = document.getElementById("td");
btn.onclick = function(){
   if(box.className == "normal"){
      box.className = "rotate";
   }else{
      box.className = "normal";
   }
}
</script>
</body>
</html>

复杂一点，加入transition效果

<!DOCTYPE html>
<html>
<head>
<style> 
.normal{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
}
.rotate{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
-webkit-transition: -webkit-transform 2s;
-webkit-transform:rotate(90deg); 
}
</style>
</head>
<body>

<button id="roll">rotate</button>
<div id="td" class="normal"></div>


<script type="text/javascript">
var btn = document.getElementById("roll");
var box = document.getElementById("td");
btn.onclick = function(){
   if(box.className == "normal"){
      box.className = "rotate";
   }else{
      box.className = "normal";
   }
}
</script>
</body>
</html>

了解 window.getComputedStyle(node)