看到非常流畅的slide动画效果。
相比之前模拟动画demo，这里多了这么行CSS代码：
.container {
transition: height 0.6s
}
然后，JS代码就基本上全部消灭了，只留下改变高度的几行代码：
var display = false
button.onclick = function() {
display = !display
container.style.height = display? "192px": "0px"
return false
}
})()
有时候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>
转载仅供参考，版权属于原作者。祝你愉快，满意请采纳哦
可以在动画元素上绑定transitionEnd事件div1.addEventListener("transitionend", fn, true)
fn函数中将div2出现
这个熟悉可能需要加浏览器前缀 没调研过
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）