最近在做H5，遇到这样的需求（如题）
先上一部分代码：
.cur .p1d1d4{
width: 3rem;
margin: 2rem 5.3rem 0 0;
-webkit-animation: p1d1d4 1s ease-out;
animation: p1d1d4 1s ease-out;
}
@keyframes p1d1d4 {
0% {
margin: 2rem 10rem 0 0;
}
100% {
margin: 2rem 5.3rem 0 0;
}
}
@-webkit-keyframes p1d1d4{
0% {
margin: 2rem 10rem 0 0;
}
100% {
margin: 2rem 5.3rem 0 0;
}
正常情况下基本思路是：
监听webkitAnimationEnd动画结束以后再add另一个class
1 document.querySelector(‘.p1d1d4‘).addEventListener("webkitAnimationEnd",function(e){
2 this.classList.add(‘p1d1d4Scale‘)
3 })
这样的话两个 动画连接在一起（自己脑补效果），但是这样做有个问题是如果这个方案是单页面形式的，回到之前页面过后会发现这个页面始终保留在p1d1d4Scale的动画结束效果，如果想再次执行之前的效果的话，可能要把之前的class效果去掉然后再加上
但是我想在一个class中实现这个效果怎么实现呢
pasting
在这里我想到了transition
简单介绍一下这个属性
这个方法有4个属性
transition-property 指定缓动的属性
transition-duration 缓动的执行时间
transition-timing-function 缓动类型
transition-delay 在指定时间之后执行（延期执行）
说道这里大家应该就懂了
.cur .p1d1d4{
width: 3rem;
margin: 2rem 5.3rem 0 0;
-webkit-animation: p1d1d4 1s ease-out;
animation: p1d1d4 1s ease-out;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
transition: all 1s ease-out 2s;
-webkit-transition: all 1s ease-out 2s;
-moz-transition: all 1s ease-out 2s;
-o-transition: all 1s ease-out 2s;
-ms-transition: all 1s ease-out 2s;
}
动画结束之后2秒执行，分享到此结束
从今天起我打算随心一些写博客，可能会基本的分享思路和方案或者技巧，言外之意就是可能会很简短，我上次的随笔 react demo是真东西，可以直接上手项目，全局ES6写法 webpack打包加载 热加载 react-router 总之汇集了一个小的demo，欢迎关注