动画的回调百家了乐八大技巧:

 百家乐-前端     |      2019-11-29 03:27

css 动漫的回调

2016/01/11 · CSS · 动画

初稿出处: 卖BBQ夫斯基   

在做项目中常常会遇上使用动漫片的情形。在此以前的情事是用js写动漫,利用setTimeout函数大概window.requestAnimationFrame(卡塔尔(قطر‎完毕指标成分的动漫效果。尽管后者解决了刷新频率和移动频率同步的题目,不过因为js频繁地操作dom带给的额外花费和复杂性的计算公式使得大好多开垦者对用原生js动漫打退堂鼓而取道各类插件动漫。那实在也是html的一块软肋,在网址上做动漫,不论就效果依然质量,JS依旧差了flash相当多步。所以当html5和css3的行业内部现身后,这种状态调换成了绝大许多人从js复杂的卡通片转向了微微轻易的css动漫。css3为我们提供了很棒的api来兑现从前要求费超大的素养技术贯彻的功能。只须求相当的轻松的代码,任哪个人都得以长足地球科学会css动漫。上边是三个动漫沿Y轴的上上游走的例证(此处均已webkit内核为私下认可标准,真实意况供给团结协作卡塔尔(英语:State of Qatar):

transform:

CSS

.mydiv { width:100px; height:100px; background:red; -webkit-transition: all 2s; } .newClass { -webkit-transform: translateY(100px) }

1
2
3
4
5
6
7
8
9
.mydiv {
    width:100px;
    height:100px;
    background:red;
    -webkit-transition: all 2s;
}
.newClass {
    -webkit-transform: translateY(100px)
}

animation:

CSS

@-webkit-keyframes mymove {     from {top:0px;}     to {top:200px;} } .mydiv {     width:100px;     height:100px;     background:red;     position:relative;     -webkit-animation:mymove 2s forwards; /* Safari and Chrome */ }

1
2
3
4
5
6
7
8
9
10
11
@-webkit-keyframes mymove {
    from {top:0px;}
    to {top:200px;}
}
.mydiv {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    -webkit-animation:mymove 2s forwards; /* Safari and Chrome */
}

如上是当前css动画日常使用的二种写法。就简洁单的卡通来讲常常趋势使用第一种transoform,要是须求在做复杂的转移,能够选取第二种animation方法,通过在分歧的运动帧上写下该帧的情形达成。

成都百货上千情形下大家需求掌握动漫哪一天完毕,甚至哪些成就后要求做哪些。也正是说供给三个动漫片完成的回调函数。在js动漫中您无需忧郁找不到回调函数,因为动画自个儿全仰赖于js,回调只可是是一个通常的函数而已。首先,卤煮也是习贯性地用js思维思忖那个难点。既然知道动漫的调换时间,那么能够用延时减轻回掉的标题。上面是延时的章程

JavaScript

//css中代码能够见到动漫持续2s var delay = 二〇〇三; setTimtout(function(卡塔尔(英语:State of Qatar){ dosomething(卡塔尔国 }, delay卡塔尔(قطر‎;

1
2
3
4
5
//css中代码可以看到动画持续2s
var delay = 2000;
setTimtout(function(){
    dosomething()
}, delay);

上面包车型大巴方法是简单驾驭,延时三个函数执行,延时的时间长度正是动漫片变化的时日,那样,看起来当动漫产生时会立刻执行函数。可是,这种艺术存在着累累严重的败笔。第风度翩翩、set提姆eout函数和css动漫不必然是雷同的。因为动漫早先的大运和setTimeout的小运严俊来讲不是平昔的,所以会不由自主依然函数提前实行,要么动漫提前甘休。第二、js代码和css代码耦合了。delay的小时要时刻跟着css内的时间走,假诺css代码改造依然js代码改造,两侧都必得花时间修复同步(也正是改成为平等时间)这扩大了职业量。第三、多少个卡通会拉动更加多的代码量和不分明因素。因为每七个测量时间的装置针对的是独立的动画成分,所以动漫成分豆蔻梢头多起来就非得加多更多的代码。第四、不可能管理多少个卡通成分同有时候甘休的事态。等。。。。

如上只是一些意识的缺欠,对于复杂的卡通片来讲,延时函数是截然不能适应。那么有办法管理动漫的回调吗?答案自然是迟早的。并且相当的轻易,跟以前绑定点击事件是同大器晚成的。js提供了css3中三种动漫的甘休事件。大家选取它们,能够非常轻易捕获到动漫的做到意况。

transitionEnd

JavaScript

document.getElementById('my').addEventListener('transitionEnd', function(){ alert('Transform animation has done!'); });

1
2
3
document.getElementById('my').addEventListener('transitionEnd', function(){
    alert('Transform animation has done!');
});

animationend

JavaScript

document.getElementById('my').addEventListener('animationend', function(){ alert('Animation has done!....'); });

1
2
3
document.getElementById('my').addEventListener('animationend', function(){
    alert('Animation has done!....');
});

作者们能够见见,它们对于开荒者来讲一点也不目生。无论是用法如故字面名称,都使得大家能够洞悉。其实说了啰里吧嗦一大堆,那篇博客重要正是四个事件名称而已。上面是它们的相配效果。大非常多浏览器都扶助了那三种事件,基本上帮忙css3动漫的浏览器就能援助这二种事件。

百家了乐八大技巧 1

百家了乐八大技巧 2

补给有个别:animationend只是animation变化事件中的风度翩翩种。你应有能想到其余的转移情状,对的就是:animationstart,animationiteration. 利用那三种情况时间,我们能够随意的主宰调换中的动漫效果。特别是animationiteration事件,可以让我们在动漫变化历程中插上一手。

1 赞 3 收藏 评论

百家了乐八大技巧 3