如何触发css3过渡动画

快乐打工仔 分类:实例代码

实际应用中,我们应该如何触发transition过渡动画呢。

关于transition动画可以参阅CSS3 transition一章节。

其实触发transition动画的本质条件只有一个,过渡的css属性的值发生了变化。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
div {
  width: 100px;
  height: 40px;
  background: #ccc;
  transition: width .5s;
}
div:hover{
  width:200px;
  cursor:pointer;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

当鼠标悬浮的时候,div元素的宽度发生了改变,那么这时候动画就开始了。

当然我们也可以通过js的方式来改变元素的属性值,同样也可以触发动画的进行。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
div {
  width: 100px;
  height: 40px;
  background: #ccc;
  transition: width .5s;
}
.antzone{
  width:200px;
  cursor:pointer;
}
</style>
<script>
window.onload = function () {
  var odiv = document.querySelector("div");
  var obt = document.querySelector("input");
  obt.onclick = function () {
    odiv.classList.add("antzone");
  }
}
</script>
</head>
<body>
<div></div>
<input type="button" value="查看效果">
</body>
</html>

通过js也可以实现修改对应过渡属性的值,然后触发动画。

(1).document.querySelector()参阅document.querySelector()一章节。

(2).classList参阅JavaScript classList 属性一章节。

回复

我来回复
  • 暂无回复内容