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

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

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

一.css动画简介

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

1.过渡

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

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

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

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

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

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

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

   div{

      width: 100px;

      transition: width 2s;

      -webkit-transtion:width 2s;

    }

    div.hover{

      width: 300px;

    }

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

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

 

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代码相互关联耦合,修改和维护比较麻烦
  • 存在多个动画需要回调时会造成代码混乱和臃肿
  • 在多个动画效果同时结束时会引起回调函数冲突

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

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

CSS动画效果的回调的更多相关文章

  1. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  2. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  4. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

  5. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  6. 运动曲线提升CSS动画效果

    原文链接 译文\译者鞠大宝 先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...

  7. css 动画效果

    要搞就搞明白,一知半解时停止研究 损失最大     css3意义: CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点 ...

  8. CSS动画效果之animation

    Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...

  9. react中使用css动画效果

    index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...

随机推荐

  1. 记一次synchronized锁字符串引发的坑兼再谈Java字符串

    问题描述 业务有一个需求,我把问题描述一下: 通过代理IP访问国外某网站N,每个IP对应一个固定的网站N的COOKIE,COOKIE有失效时间.并发下,取IP是有一定策略的,取到IP之后拿IP对应的C ...

  2. 老李推荐：第1章2节《MonkeyRunner源码剖析》概述:边界

    老李推荐:第1章2节<MonkeyRunner源码剖析>概述:边界   边界 怎么样才算分析清楚一个事物的原理是什么呢?就以前面提到的<LINUX内核源代码情景分析>为例子,分 ...

  3. JAVA加密算法系列-BASE64

    package ***; import java.io.IOException; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encode ...

  4. 一个web应用的诞生(11)--列表分页

    上章的结束,若在实际开发过程中,会发现一个问题,那就首页或关注分享,是一下子按时间顺序全部显示出来,这在实际项目中不可能出现的,想想实际中的产品是如何做的? 一般来说,无非是两种,一种是使用页码,来进 ...

  5. Java常用的八种排序算法与代码实现

    1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已经排好的数据列中. 将第一个数和第二个数排序,然后构成一个有序序列 将第三个数插入进去,构成一个新的有序序列. 对第四个数.第五个数--直 ...

  6. sublime前端开发工具常用技巧

    ctrl+N//新建文件夹ctrl+shift+p//打开命令行!,ctrl+E//快速生成html模板ctrl+E//自动补齐ctrl+P(#@)//goto 任何地方,其中#查找元素,@查找样式c ...

  7. UPS不间断电源网络功能介绍

    UPS不间断电源网络功能介绍 随着联网技术的善及,用户又向UPS提出了更高的要求:ups电源应具有无人値守的功铅酸蓄电池能,不但具有自检的功能,还应具有联网功能,在网上UPS不间断电源可以随时观察up ...

  8. Map的迭代

    public static void main(String[] args) { Map<String, Integer> map = new HashMap<String, Int ...

  9. Latex 公式在线可视化编辑器

    寻觅 最近的一个demo需要用到Latex公式在线编辑器,从搜索引擎一般会得到类似http://latex.codecogs.com/eqneditor/editor.php的结果,这个编辑器的问题在 ...

  10. oracle 的 SDO_GEOMETRY

    元数据定义 CREATE OR REPLACE TYPE MDSYS.SDO_GEOMETRY AS OBJECT ( SDO_GTYPE NUMBER, SDO_SRID NUMBER, SDO_P ...