金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > javascript判断css3动画结束,动画的回调

javascript判断css3动画结束,动画的回调

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-05 18:51

css 动画的回调

2016/01/11 · 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);

上面的方法是不难理解,延时一个函数执行,延时的时长就是动画变化的时间,这样,看起来当动画完成时会立即执行函数。但是,这种方式存在着很多严重的缺陷。第一、setTimeout函数和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

您可能感兴趣的文章:

  • JS动态插入并立即执行回调函数的方法
  • Javascript基于AJAX回调函数传递参数实例分析
  • js自定义回调函数
  • 谈谈JavaScript自定义回调函数
  • js的回调函数详解
  • 告诉你什么是javascript的回调函数
  • 金沙棋牌官方平台 ,理解javascript中的回调函数(callback)
  • js中回调函数的学习笔记
  • JS脚本加载后执行相应回调函数的操作方法

用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现.

下面附上源代码:

一.css动画简介

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

以上就是本文所述的关于javascript判断CSS3动画结束的方法,希望大家能够喜欢

例如我们想在动画效果完成时调用回调函数来处理一些事务,会发现CSS并没有提供直接的方法来让我们使用.

复制代码 代码如下:

 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的延时函数 setTimtout() 来解决CSS动画的回调问题,类似如下的代码:

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

 

 

但是这种方法由于并不是真正意义的回调,会造成以下几个问题:

  • 由于动画和延时函数并不一定是同一时间开始,导致函数和动画不同步
  • 会造成JS代码和CSS代码相互关联耦合,修改和维护比较麻烦
  • 存在多个动画需要回调时会造成代码混乱和臃肿
  • 在多个动画效果同时结束时会引起回调函数冲突

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

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

1.过渡

当元素从一种样式转变为另一种样式,我们为这种转变添加动画效果,这种效果就称作过渡.

CSS的过渡是通过 transtion 属性实现的.

transtion属性必须包含以下两个值:

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

另外还有两个可选的属性值:

  • 过渡效果的速度时间曲线函数
  • 过渡效果的延迟时间

下面是一个CSS过渡效果的例子:

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

 

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

我们为宽度添加上 2s 过渡效果.最后效果如下:

 

传统的js 可以通过回调函数判断动画是否结束;即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件;

CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段.

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

二.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动画回调函数的一些知识,希望对你有帮助.

transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件

金沙棋牌官方平台 4

<!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>

复制代码 代码如下:

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:javascript判断css3动画结束,动画的回调

关键词: