如何使用JavaScript控制CSS Animations和Transitions
1个回答
展开全部
有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解。虽然CSS动画有其局限性，但它的性能比大多数JavaScript库更加高效，因为它可以借助硬件加速啊！其效果绝对可以超出我们的预期。
CSS animations和transitions再加上点JavaScript就可以实现硬件加速动画，而且其交互效果比大多数JavaScript库更高效。
So，让我们快点开始吧！小伙伴们都等不及了！
注意：Animations(动画)和Transitions(过渡)是不同的
CSS Transitions(过渡)被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终需要的值；而CSS Animations(动画)只是在应用时执行之前定义好的操作，它提供更细粒度的控制。
在这篇文章中，我们将分别针对上述内容进行讲解。
控制CSS Transition(过渡)
在编程论坛中，关于transition(过渡)的触发和暂停有无数的疑问。使用JavaScript可以很容易的解决这些疑问。
如何触发元素的transiton(过渡)？切换元素的类名可以触发该元素的transition(过渡)
如何暂停元素的transition(过渡)？ 在你想要暂停过渡点，用getComputedStyle和getPropertyValue获取该元素相应的CSS属性值，然后设置该元素的对应的CSS属性等于你刚才获取到的CSS属性值。
以下是该方法的一个例子。
<!DOCTYPE html>
<html>
<head>
<title>操作transtition</title>
<style type="text/css">
.box {
margin: 30px;
height: 50px;
width: 50px;
background-color: blue;
}
.box.horizTranslate {
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
margin-left: 50% !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h3>Pure Javascript</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
<h3>jQuery</h3>
<div class='box'></div>
CSS animations和transitions再加上点JavaScript就可以实现硬件加速动画，而且其交互效果比大多数JavaScript库更高效。
So，让我们快点开始吧！小伙伴们都等不及了！
注意：Animations(动画)和Transitions(过渡)是不同的
CSS Transitions(过渡)被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终需要的值；而CSS Animations(动画)只是在应用时执行之前定义好的操作，它提供更细粒度的控制。
在这篇文章中，我们将分别针对上述内容进行讲解。
控制CSS Transition(过渡)
在编程论坛中，关于transition(过渡)的触发和暂停有无数的疑问。使用JavaScript可以很容易的解决这些疑问。
如何触发元素的transiton(过渡)？切换元素的类名可以触发该元素的transition(过渡)
如何暂停元素的transition(过渡)？ 在你想要暂停过渡点，用getComputedStyle和getPropertyValue获取该元素相应的CSS属性值，然后设置该元素的对应的CSS属性等于你刚才获取到的CSS属性值。
以下是该方法的一个例子。
<!DOCTYPE html>
<html>
<head>
<title>操作transtition</title>
<style type="text/css">
.box {
margin: 30px;
height: 50px;
width: 50px;
background-color: blue;
}
.box.horizTranslate {
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
margin-left: 50% !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h3>Pure Javascript</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
<h3>jQuery</h3>
<div class='box'></div>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
