动画的回调,css3动画截止的回调函数

css 动画的回调

2016/01/11 · CSS ·
动画

初稿出处:
卖烧烤夫斯基   

在做项目中时常会遭受使用动画片的情形。在此以前的情事是用js写动画,利用set提姆eout函数或者window.requestAnimationFrame()已毕目的元素的卡通效果。纵然后者解决了刷新频率和活动频率同步的题材,可是因为js频仍地操作dom带来的额外开支和错综复杂的总计公式使得一大半开发者对用原生js动画望而却步而取道各类插件动画。那其实也是html的一块软肋,在网站上做动画,无论就效果依然品质,JS照旧差了flash很多步。所以当html5和css3的正经现身后,那种场所转变成了大多数人从js复杂的动画转向了有些不难的css动画。css3为我们提供了很棒的api来已毕从前要求费很大的素养才能落到实处的功效。只须要很粗略的代码,任哪个人都可以高速地学会css动画。上面是一个动画沿Y轴的上下游走的事例(此处均已webkit内核为默许标准,实际情况必要自己同盟):

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 = 2000; set提姆tout(function(){
dosomething() }, delay);

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

上边的主意是简单领会,延时一个函数执行,延时的时长就是卡通变化的时光,那样,看起来当动画完了时会立刻施行函数。然而,那种办法存在着不少严重的欠缺。第一、set提姆eout函数和css动画不必然是同样的。因为动画初叶的岁月和set提姆eout的小时严峻来说不是间接的,所以会产出照旧函数提前实施,要么动画提前停止。第二、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

在做项目中时常会境遇使用动画片的情事。此前的情事是用js写动画,利用set提姆eout函数或者window.requestAnimationFrame()达成目的元素的卡通片效果。就算后者解决了刷新频率和活动频率同步的难点,可是因为js频仍地操作dom带来的额外费用和错综复杂的总结公式使得大部分开发者对用原生js动画望而却步而取道各个插件动画。那实在也是html的一块软肋,在网站上做动画,无论就效果如故质量,JS依旧差了flash很多步。所以当html5和css3的标准出现后,这种景色转变成了多数人从js复杂的卡通片转向了多少不难的css动画。css3为大家提供了很棒的api来促成此前须求费很大的素养才能落实的成效。只须要很简短的代码,任哪个人都得以便捷地学会css动画。上边是一个动画沿Y轴的上下游走的事例(此处均已webkit内核为默许标准,实际景况须求团结合作):
transform:

css3 的一时,css3–动画 一切皆有可能;

用纯JS落成动画效果代码量大,总计复杂.因而现在前端页面的卡通片效果一般都利用CSS来达成.

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

亚洲必赢官网 4

CSS动画落成不难急速,可是在处理动画,控制动画进度上却缺乏一些有效手段.

animation:

历史观的js
能够因此回调函数判断动画是还是不是终止;即使是运用CSS技术生成动画效果,JavaScript依然能捕获动画或撤换的收尾事件;

诸如大家想在动画效果已毕时调用回调函数来处理局地政工,会意识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 */
}

动画的回调,css3动画截止的回调函数。transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍旧须求使用webkit前缀,所以,我们只可以依照各类浏览器分别检测事件

一.css动画简介

css动画效果有三种,即过渡和动画.

如上是现阶段css动画常常应用的二种写法。就简洁单的动画来说一般倾向利用第一种transoform,若是急需在做复杂的转移,可以选取第二种animation方法,通过在不一致的运动帧上写下该帧的情形完结。

复制代码 代码如下:

1.过渡

当元素从一种体裁转变为另一种样式,大家为那种转移添加动画作用,那种成效就称作过渡.

CSS的连片是由此 transtion
属性落成的.

transtion属性必须含有以下几个值:

  • 要添加过渡效果的样式属性名
  • 对接效果持续时间

其余还有多个可选的属性值:

  • 连通效果的进程时间曲线函数
  • 紧接效果的延迟时间

上边是一个CSS过渡效果的例证:

   div{
      width: 100px;
      transition: width 2s;
      -webkit-transtion:width 2s;
    }
    div.hover{
      width: 300px;
    }

 

 当鼠标移动到此div上时,此div宽度会扩大200px.

大家为宽度添加上 2s
过渡效果.最终效果如下:

 

很多景观下大家必要精通动画几时落成,以及怎样成就后要求做怎么着。也就是说须要一个动画片已毕的回调函数。在js动画中您不要求操心找不到回调函数,因为动画本身全仰赖于js,回调只然则是一个不以为奇的函数而已。首先,卤煮也是习惯性地用js思维思考这些难点。既然知道动画的变通时间,那么可以用延时缓解回掉的标题。上边是延时的艺术

var transitions = {
       ‘transition’:’transitionend’,
       ‘OTransition’:’oTransitionEnd’,
       ‘MozTransition’:’transitionend’,
       ‘WebkitTransition’:’webkitTransitionEnd’
     }

 2.动画

在落成相比较复杂的动画片时,单纯利用过渡已经黔驴技穷达成目的,可以选拔使用CSS的animation属性来定义动画效果.

要想利用animation属性,我们务必先了然一下CSS3参加的@keyframes规则.

@keyframes规则用于创制动画,能够从动画运动状态的帧来定义动画.

正如即@kayframes定义动画的事例:

@keyframes show
{
    from {color: red;}
    to {color: yellow;}
}

@-webkit-keyframes show /* Safari 与 Chrome */
{
    from {color: red;}
    to {color: yellow;}
}

 

透过@keyframes我们可以定义动画从开首到截止的体裁变化
.

我们也可以透过定义动画效果的比重状态来定义动画样式,如下

@keyframes show
{
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: blue;}
    100% {color: green;}
}

@-webkit-keyframes show /* Safari 与 Chrome */
{
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: blue;}
    100% {color: green;}
}

 

在行使@keyframes定义了动画片效果之后,大家得以由此animation 来将动画效果绑定到元素,如下:

div:hover{
   animation:show 5s;
}

 

切切实实成效如下:

动画片文字

 鼠标移动其上即可看到动画效果

如上就是CSS动画的简要介绍,此外CSS3还添加了transform属性,用于2D和3D转换,也被平时用来作为动画使用.

二.CSS动画的回调函数

像上述的CSS动画,如果想行使回调函数来支配动画完毕后的事务处理,是比较坚苦的.

一.延时函数

广大人使用JS的延时函数 set提姆tout()
来缓解CSS动画的回调难题,类似如下的代码:

setTimtout(function(){
     dosomething()  //动画的回调函数
     }, delaytime);      //动画的持续时间

 

 

唯独那种措施由于并不是实在意义的回调,会招致以下多少个难题:

  • 是因为动画和延时函数并不一定是同一时间初始,导致函数和动画片不一起
  • 会造成JS代码和CSS代码相互关系耦合,修改和护卫相比较费心
  • 存在五个卡通要求回调时会造成代码混乱和臃肿
  • 在五个卡通效果还要竣事时会引起回调函数争持

为此,不提议使用延时函数作为动画的回调函数.

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

下边附上源代码:

二.JS事件

实质上,JS提供了七个事件,可以健全的化解动画的回调函数难点,那就是
transtionend 和 animationend,当动画已毕时,即会接触对应的事件.

俺们可以透过那四个事件轻松优雅的为动画片添加回调函数.

现实用法如下:

transtionend

document.getElementById("myDIV").addEventListener("transitionend", myFunction); //myFunction即为动画回调函数

 

animationend

document.getElementById("myDIV").addEventListener("animationend", myFunction); //myFunction即为回调函数

 

咱俩由此以下这一个例子来感受那三个事件的切实可行行使:

<style>
  div#test
{
  width:100px;
  height:100px;
  background:red;
  transition:width 2s;
  -webkit-transition:width 2s; /* Safari */
}

div#test:hover
{
  width:300px;
}
</style>
</head>
<body>
<div id="test">&nbsp;</div> 
<script>
document.getElementById("test").addEventListener("transitionend", myFunction);
function myFunction() {
    this.innerHTML = "回调函数触发div变为粉色";
    this.style.backgroundColor = "pink";
}
</script>

效果如下:

 

 

当然也可以运用Jquery库的动画片回调函数,很简短,代码类似如下,

 

   $("#item").animate({height:"200px"}, function() {
        alert("hello");
    });

 

以上就是关于CSS动画回调函数的部分学问,希望对您有帮扶.

地点的方法是不难精通,延时一个函数执行,延时的时长就是卡通片变化的时刻,那样,看起来当动画完了时会立时施行函数。然而,那种方法存在着无数严重的弱项。第一、set提姆eout函数和css动画不必然是平等的。因为动画起先的时光和set提姆eout的年华严刻来说不是直接的,所以会出现如故函数提前实施,要么动画提前为止。第二、js代码和css代码耦合了。delay的年月要每一天跟着css内的岁月走,固然css代码改变或者js代码改变,两边都必须花时间修复同步(也就是改成为平等时间)那增加了工作量。第三、七个卡通会带来更加多的代码量和不确定因素。因为每一个定时器针对的是独自的卡通元素,所以动画元素一多起来就不可能不添加越多的代码。第四、不可能处理八个卡通元素同一时间截止的事态。等。。。。

复制代码 代码如下:

如上只是一些意识的通病,对于复杂的动画来说,延时函数是完全不可能适应。那么有法子处理动画的回调吗?答案当然是必定的。而且很简单,跟从前绑定点击事件是如出一辙的。js提供了css3中二种动画的扫尾事件。我们选择它们,可以很不难捕获到动画的形成情形。

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>suface   js判断css动画是还是不是终止</title>
</head>
<body>
<p>一旦动画或更换截至,回调函数就会接触。不再必要大型类库匡助。<br>
</p>
<style type=”text/css”>
.sample {
width: 200px;
height: 200px;
border: 1px solid green;
background: lightgreen;
opacity: 1;
margin-bottom: 20px;
transition-property: opacity;
/*transition-duration: .5s;*/
亚洲必赢官网,transition-duration:3s;
}
  .sample.hide {
opacity: 0;
}
</style>
<div
class=”sample”>css3动画过度逐渐隐藏(transition-duration:3s;)</div>
<p><button
onclick=”this.style.display=’none’;startFade();”>逐步化为乌有,检测为止事件</button></p>
<script>            
                   (function() {
   var e = document.getElementsByClassName(‘sample’)[0];
   function whichTransitionEvent(){
       var t;
       var el = document.createElement(‘fakeelement’);
       var transitions = {
         ‘transition’:’transitionend’,
         ‘OTransition’:’oTransitionEnd’,
         ‘MozTransition’:’transitionend’,
         ‘WebkitTransition’:’webkitTransitionEnd’
       }
       for(t in transitions){
           if( el.style[t] !== undefined ){
               return transitions[t];
           }
       }
   }
   var transitionEvent = whichTransitionEvent();
   transitionEvent && e.addEventListener(transitionEvent, function() {
    alert(‘css3运动截至!我是回调函数,没有动用第三方类库!’);
   });
   startFade = function() {
    e.className+= ‘ hide’;
   }
  })();<br></script>
</body>
</html>

transitionEnd

上述就是本文所述的关于javascript判断CSS3动画甘休的点子,希望大家可以欣赏

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

您可能感兴趣的稿子:

  • JS动态插入并随即执行回调函数的办法
  • Javascript基于AJAX回调函数传递参数实例分析
  • js自定义回调函数
  • 谈谈JavaScript自定义回调函数
  • js的回调函数详解
  • 告诉你如何是javascript的回调函数
  • 知情javascript中的回调函数(callback)
  • js中回调函数的就学笔记
  • JS脚本加载后举行相应回调函数的操作方法

animationend

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

咱俩可以见见,它们对于开发者来说一点也不陌生。不论是用法依旧字面名称,都使得我们可以看清。其实说了啰里吧嗦一大堆,那篇博客主要就是四个事件名称而已。下边是它们的很是效果。一大半浏览器都协助了那三种事件,基本上协助css3动画的浏览器就会支撑那三种事件。

亚洲必赢官网 5

亚洲必赢官网 6

补偿某些:animationend只是animation变化事件中的一种。你应该能体悟其他的变迁情状,没错就是:animationstart,animationiteration.
利用那二种情状时间,大家得以任意的控制转变中的动画效果。越发是animationiteration事件,可以让大家在动画变化历程中插上一手。

网站地图xml地图