用纯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. python之字符串

    字符串与文本操作 字符串: Python 2和Python 3最大的差别就在于字符串 Python 2中字符串是byte的有序序列 Python 3中字符串是unicode的有序序列 字符串是不可变的 ...

  2. Android实战（一）学习了多个控件实现登录及记住密码功能

    首先确定一下需要的控件: 两个EditText:用于输入账号和密码 一个button:用于登录查看账号和密码是否正确 一个checkbox:用于记住密码和账户 一个Androidstudio:用于编写 ...

  3. (一) 这就是所谓的Node.js------单线程，非阻塞，事件驱动

    Node.js 第一天笔记(V1) 一:Node.js到底是从何而来 2008年的秋天,一个名叫做Ryan Dahl(罗伊･达尔)的年轻人在玩了几年服务器编程之后,越发感到服务器高并发性能的瓶颈是一个 ...

  4. EDP转接IC NCS8805：RGB/LVDS转EDP芯片，带Scaler

    RGB/LVDS-to-eDP Converter w/ Scaler1 FeaturesEmbedded-DisplayPort (eDP) Output1/2/4-lane eDP @ 1.62/ ...

  5. 基于WebForm和Bootstrap的权限框架解决方案 一．PQGRID的使用

    天天打游戏也不是个事,就写一套权限框架吧,我的要求是即漂亮美观大方上档次,又要实用易用接地气. 按理来说应该先设计数据库在来秀的,但是人生就是这么随意,先搭个框子吧, 这一篇的重点是pqgrid的介绍 ...

  6. jquery 中 eq()遍历方法 和:eq()选择器的区别

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 极化SAR图像基础知识(2)

    本篇主要关注物理含义 1.极化 电磁波在传播时,传播的方向和电场.磁场相互垂直,我们把电波的电场方向叫电波的极化.(i.e.依据电场E的方向来定义电磁波的极化). 如果电场矢量端点随时间变化的轨迹是一 ...

  8. Kindle PaperWhite3 越狱和PDF插件的安装

    下载所需工具 这里分享的文件是这个教程中所需要的所有文件 所有工具下载链接:http://pan.baidu.com/s/1c249P2S 密码:ozc7 一.准备工作 本越狱方法仅适用于 KO.KV ...

  9. 使用纯CSS方案，解决垂直居中

    CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...

  10. KEIL中逻辑分析仪的使用

    本学期开了门嵌入式的课程,在实验课上用到了一款基于ARM Cortex-M3处理器的LPC1768的实验板.本来这种课程我觉得应该可以学到很多东西,可是我发现实验课上老师基本只是讲了xx实验课的要求, ...