CSS动画效果的回调,动画的回调

css 动画的回调

2016/01/11 · CSS ·
CSS动画效果的回调,动画的回调。动画

原稿出处:
卖烧烤夫斯基   

在做项目中平时会遭遇使用动画片的动静。往日的动静是用js写动画,利用setTimeout函数或者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; setTimtout(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 */
}

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地图