关于transition和animation

最近的工作以移动端项目居多，经常会涉及一些比较小的动画效果，所以使用css3设计动画效果也就越发熟练起来。但是不得不承认，一直以来都是凭感觉使用transform, transition, animation，而没有深究过这三者之间的真正的内在的区别，以及一些触发条件。

仅仅知道从字面上理解这三者：

transform：变形

transition：过渡

animation：动画

transform基本上用在静态元素的变形上面，其本身并不具备动画效果，所以此处略去不说。

关于animation前面也踩到了坑，也填过一些坑，至少目前在使用上问题不太大了，今天做的一个效果是：活动结束页面上，有一艘小船，为了具有一点形象性的意义，我给小船做了一个移除页面的动画，移除页面，不能再回来了。

.over-ship{

	width: 4.5rem;

	height: 2.85rem;

	margin-top: 1rem;

	float: right;

	background: url(../../images/saishihui/ship.png) no-repeat center center / contain;　　/**小小船只的图片*/

	-webkit-animation: leaveOver 3s ease-in;

	　　　　　animation: leaveOver 3s ease-in;

	-webkit-animation-fill-mode:forwards;

		animation-fill-mode:forwards;

}

@-webkit-keyframes leaveOver{

	100% {

		margin-right: -4.5rem;

	}

}

@keyframes leaveOver{

	100% {

		margin-right: -4.5rem;

	}

}

w3scool上解释：animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

用法：animation-fill-mode : none | forwards | backwards | both;

关于transition和animation

知道用法即可。

这里更多关注一下transition。用法不多说，主要说一下transition的触发方式。

一般分为伪类触发，媒体查询触发，JavaScript触发。

常用伪类触发包括:hover、:focus、:active等，应该比较熟悉。

媒体查询触发，从字面意思也基本能够理解。

主要说一下JavaScript触发，一直以来，我都是认为，给一个DOM元素添加不同的class，在新增的class里面设置transition，通过addClass(newClass)即可触发transition，但是今天在项目中使用该方法之后，发现并不能触发这个transition，然后就是各种搜索原因。

发现可以通过DOM操作其css属性，实现transition的过渡效果。

$('.override').get()[0].style.setProperty('opacity', 1);

这时就能够触发从opacity从0到1的效果，有一点需要注意的是如果dom元素先设置了dispaly=none的属性，则需要在 js改变其为display:block 后延迟一段时间之后再去设置其他过渡动画，否则该过渡动画不会触发。

// 点击关闭按钮。关闭弹框

$('.override').addClass('in');　　　　　　　　// 设置.override显示

setTimeout(function () {　　　　　　　　　　　 // 延迟设置opacity显示的动画

　　$('.override').get()[0].style.setProperty('opacity', 1);

}, 300);

秒客网

关于transition和animation

相关文章