用纯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. Nginx+Tomcat动静分离脚本

    #!/bin/bashsetenforce 0systemctl stop firewalldtar -zxvf nginx-1.8.0.tar.gz -C /usr/src/ cd /usr/src ...

  2. Androidstudio2.0.0下载，欢迎下载

    Androidstudio开发工具很实用,但是没了Google下载还是蛮麻烦的,所以呢Eric就向大家提供了下载的地址,其实就是从自己网盘考过来的,大家可以下载的. http://pan.baidu. ...

  3. Linux线程的创建

    一.线程与进程的区别 1.线程自己不拥有系统资源,只拥有一点儿在运行中必不可少的资源,但它可与同属一个进程的其它线程共享进程所拥有的全部资源. 2.进程是资源分配的基本单位.所有与该进程有关的资源,都 ...

  4. php调试之路

    解析php中die(),exit(),return的区别 die()停止程序运行,输出内容exit是停止程序运行,不输出内容return是返回值die是遇到错误才停止exit是直接停止,并且不运行后续 ...

  5. 老李分享：jvm结构简介 2

    2.2.4 Program counter regsiters:程序计数器 类似于PC寄存器,是一块较小的内存区域,通过程序计数器中的值寻找要执行的指令的字节码,由于多线程间切换时要恢复每一个线程的当 ...

  6. SQL编程的一些良好好习惯

    |转载自:cnblog |原文链接:http://www.cnblogs.com/MR_ke/archive/2011/05/29/2062085.html 我们做软件开发的,大部分人都离不开跟数据库 ...

  7. struts2 之 struts2数据处理

    开门见山,struts2的数据处理总结: 1. 在servlet中,如果要获取页面提交的数据要使用requerst.getParameter方法来获取,并且每次需要进行相关的类型转换工作,数据的获取及 ...

  8. 为什么大多数培训机构还停留在只教ssh框架？

    最近听一些朋友说,招聘面试的很多人简历都差不多,大部分人的简历上面都写了熟悉ssh框架,我朋友就在吐槽,为什么这些人简历都差不多,并且都熟悉ssh框架? 后面他说, 可能这些人都是培训机构出来的, 然 ...

  9. 利刃 MVVMLight 7：命令深入

    上面一篇我们大致了解了命令的基本使用方法和基础原理,但是实际在运用命令的时候会复杂的多,并且有各种各样的情况. 一.命令带参数的情况: 如果视图控件所绑定的命令想要传输参数,需要配置 CommandP ...

  10. Display:table;妙用，使得左右元素高度相同

    我们在设计网页的时候,为了左右能够分明一点,我们经常会在左边元素弄一个border-right,但是出现一个问题,如果左边高度比较小,这根线就短了,下面空了一部分,反正如果在右边的元素弄一个borde ...