如何使用JavaScript控制CSS Animations和Transitions
4个回答
展开全部
有时候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>
<button class='toggleButton' value='play'>Play</button>
<script type="text/javascript">
var boxOne = document.getElementsByClassName('box')[0],
boxTwo = $(".box:eq(1)");
document.getElementsByClassName('toggleButton')[0].onclick = function(){
if(this.innerHTML === 'Play'){
this.innerHTML = 'Pause';
boxOne.classList.add('horizTranslate');
}else{
this.innerHTML = 'Play';
var computedStyle = window.getComputedStyle(boxOne),
marginLeft = computedStyle.getPropertyValue("margin-left");
boxOne.style.marginLeft = marginLeft;
boxOne.classList.remove('horizTranslate');
}
}
$('.toggleButton:eq(1)').on('click',function(){
if($(this).html() === 'Play'){
$(this).html('Pause');
boxTwo.addClass('horizTranslate');
}else{
$(this).html('Play');
var computedStyle = boxTwo.css('margin-left');
boxTwo.css('margin-left',computedStyle);
boxTwo.removeClass('horizTranslate');
}
});
</script>
</body>
</html>
执行效果：http://cdpn.io/GokAm
同样的技术可以用在更高级的方法上。下面的例子也是通过改变类名来触发元素的transition(过渡)，但这次可以跟踪当前的缩放率。
<!DOCTYPE html>
<html>
<head>
<title>操作transtition</title>
<style type="text/css">
.zoomPic {
margin: 30px;
width: 300px;
height: 180px;
background-color: blue;
background-image: url(http://placehold.it/1200x720);
background-repeat:no-repeat;
background-position:50% 50%;
background-size: 300px 180px;
-webkit-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-ms-transition: all 2.5s ease-in-out;
-o-transition: all 2.5s ease-in-out;
transition: all 2.5s ease-in-out;
}
.zoomPic.zoom {
background-size: 1200px 720px !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h3>Pure Javascript</h3>
<div class="zoomPic"></div>
<button class='zoom'>Zoom</button>
<button class='pause'>Pause</button>
<button class='zoomout'>Zoom Out</button>
<h3>jQuery</h3>
<div class='zoomPic'></div>
<button class='zoom'>Zoom</button>
<button class='pause'>Pause</button>
<button class='zoomout'>Zoom Out</button>
<script type="text/javascript">
var zoomOne = document.getElementsByClassName('zoomPic')[0],
zoomOneBgSize = window.getComputedStyle(zoomOne).getPropertyValue('background-size'),
zoomTwo = $(".zoomPic:eq(1)"),
zoomTwoBgSize = zoomTwo.css('background-size');
// zoomOne:zoom
document.getElementsByClassName('zoom')[0].onclick = function(){
if(!zoomOne.classList.contains('zoom')){
zoomOne.classList.add('zoom');
}
}
// zoomOne:pause
document.getElementsByClassName('pause')[0].onclick = function(){
var computedStyle = window.getComputedStyle(zoomOne),
backgroundSize = computedStyle.getPropertyValue("background-size");
zoomOne.style.backgroundSize = backgroundSize;
zoomOne.classList.remove('zoom');
}
// zoomOne:zoomout
document.getElementsByClassName('zoomout')[0].onclick = function(){
zoomOne.classList.remove('zoom');
zoomOne.style.backgroundSize = zoomOneBgSize;
}
// zoomTwo:zoom
$('.zoom:eq(1)').on('click',function(){
if(!zoomTwo.hasClass('zoom')){
zoomTwo.addClass('zoom');
}
});
// zoomTwo:pause
$('.pause:eq(1)').on('click',function(){
var computedStyle = zoomTwo.css('background-size');
zoomTwo.css('background-size',computedStyle);
zoomTwo.removeClass('zoom');
});
// zoomTwo:zoomout
$('.zoomout:eq(1)').on('click',function(){
zoomTwo.removeClass('zoom');
zoomTwo.css('background-size',zoomTwoBgSize);
});
</script>
</body>
</html>
转载仅供参考，版权属于原作者。祝你愉快，满意请采纳哦
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>
<button class='toggleButton' value='play'>Play</button>
<script type="text/javascript">
var boxOne = document.getElementsByClassName('box')[0],
boxTwo = $(".box:eq(1)");
document.getElementsByClassName('toggleButton')[0].onclick = function(){
if(this.innerHTML === 'Play'){
this.innerHTML = 'Pause';
boxOne.classList.add('horizTranslate');
}else{
this.innerHTML = 'Play';
var computedStyle = window.getComputedStyle(boxOne),
marginLeft = computedStyle.getPropertyValue("margin-left");
boxOne.style.marginLeft = marginLeft;
boxOne.classList.remove('horizTranslate');
}
}
$('.toggleButton:eq(1)').on('click',function(){
if($(this).html() === 'Play'){
$(this).html('Pause');
boxTwo.addClass('horizTranslate');
}else{
$(this).html('Play');
var computedStyle = boxTwo.css('margin-left');
boxTwo.css('margin-left',computedStyle);
boxTwo.removeClass('horizTranslate');
}
});
</script>
</body>
</html>
执行效果：http://cdpn.io/GokAm
同样的技术可以用在更高级的方法上。下面的例子也是通过改变类名来触发元素的transition(过渡)，但这次可以跟踪当前的缩放率。
<!DOCTYPE html>
<html>
<head>
<title>操作transtition</title>
<style type="text/css">
.zoomPic {
margin: 30px;
width: 300px;
height: 180px;
background-color: blue;
background-image: url(http://placehold.it/1200x720);
background-repeat:no-repeat;
background-position:50% 50%;
background-size: 300px 180px;
-webkit-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-ms-transition: all 2.5s ease-in-out;
-o-transition: all 2.5s ease-in-out;
transition: all 2.5s ease-in-out;
}
.zoomPic.zoom {
background-size: 1200px 720px !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h3>Pure Javascript</h3>
<div class="zoomPic"></div>
<button class='zoom'>Zoom</button>
<button class='pause'>Pause</button>
<button class='zoomout'>Zoom Out</button>
<h3>jQuery</h3>
<div class='zoomPic'></div>
<button class='zoom'>Zoom</button>
<button class='pause'>Pause</button>
<button class='zoomout'>Zoom Out</button>
<script type="text/javascript">
var zoomOne = document.getElementsByClassName('zoomPic')[0],
zoomOneBgSize = window.getComputedStyle(zoomOne).getPropertyValue('background-size'),
zoomTwo = $(".zoomPic:eq(1)"),
zoomTwoBgSize = zoomTwo.css('background-size');
// zoomOne:zoom
document.getElementsByClassName('zoom')[0].onclick = function(){
if(!zoomOne.classList.contains('zoom')){
zoomOne.classList.add('zoom');
}
}
// zoomOne:pause
document.getElementsByClassName('pause')[0].onclick = function(){
var computedStyle = window.getComputedStyle(zoomOne),
backgroundSize = computedStyle.getPropertyValue("background-size");
zoomOne.style.backgroundSize = backgroundSize;
zoomOne.classList.remove('zoom');
}
// zoomOne:zoomout
document.getElementsByClassName('zoomout')[0].onclick = function(){
zoomOne.classList.remove('zoom');
zoomOne.style.backgroundSize = zoomOneBgSize;
}
// zoomTwo:zoom
$('.zoom:eq(1)').on('click',function(){
if(!zoomTwo.hasClass('zoom')){
zoomTwo.addClass('zoom');
}
});
// zoomTwo:pause
$('.pause:eq(1)').on('click',function(){
var computedStyle = zoomTwo.css('background-size');
zoomTwo.css('background-size',computedStyle);
zoomTwo.removeClass('zoom');
});
// zoomTwo:zoomout
$('.zoomout:eq(1)').on('click',function(){
zoomTwo.removeClass('zoom');
zoomTwo.css('background-size',zoomTwoBgSize);
});
</script>
</body>
</html>
转载仅供参考，版权属于原作者。祝你愉快，满意请采纳哦
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2018-06-28 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
有时候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属性值。
CSS animations和transitions再加上点JavaScript就可以实现硬件加速动画，而且其交互效果比大多数JavaScript库更高效。
So，让我们快点开始吧！小伙伴们都等不及了！
注意：Animations(动画)和Transitions(过渡)是不同的
CSS Transitions(过渡)被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终需要的值；而CSS Animations(动画)只是在应用时执行之前定义好的操作，它提供更细粒度的控制。
在这篇文章中，我们将分别针对上述内容进行讲解。
控制CSS Transition(过渡)
在编程论坛中，关于transition(过渡)的触发和暂停有无数的疑问。使用JavaScript可以很容易的解决这些疑问。
如何触发元素的transiton(过渡)？切换元素的类名可以触发该元素的transition(过渡)
如何暂停元素的transition(过渡)？ 在你想要暂停过渡点，用getComputedStyle和getPropertyValue获取该元素相应的CSS属性值，然后设置该元素的对应的CSS属性等于你刚才获取到的CSS属性值。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-05-20 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
/*animation:myfirst 5s;
-moz-animation:myfirst 5s;
-webkit-animation:myfirst 5s;
-o-animation:myfirst 5s;*/
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('div').click(function(){
$(this).css('animation','myfirst 5s')
})
})
</script>
<body>
<div></div>
</body>
</html>
可以使用JQuery的CSS方法控制添加CSS属性
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
/*animation:myfirst 5s;
-moz-animation:myfirst 5s;
-webkit-animation:myfirst 5s;
-o-animation:myfirst 5s;*/
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('div').click(function(){
$(this).css('animation','myfirst 5s')
})
})
</script>
<body>
<div></div>
</body>
</html>
可以使用JQuery的CSS方法控制添加CSS属性
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
dom.style.attr=value
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
