用纯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. Mycat中的核心概念

      Mycat中的核心概念     Mycat中的核心概念 1.数据库中间件    Mycat 是一个开源的分布式数据库系统,但是由于真正的数据库需要存储引擎,而 Mycat 并没有 存储引擎,所以并 ...

  2. 微信小程序-实战巩固（二）

    刚刚写了小程序入门没几天,小程序就开放个人开发者资格,感觉为我而来啊 \(≧▽≦)/.迫不及待的去注册,准备将之前的处女作传上去体验一把,结果卡在了服务器配置上:免费的果然不靠谱/(ㄒoㄒ)/~~,后 ...

  3. XJOI1657&Codevs1255搭积木【树状动规】

    搭积木 一种积木搭建方式,高为H的积木,最底层有M个积木,每一层的积木数是他的低一层的积木数+1或-1.总共有N个积木.(且每行积木数不超过10)比如上图N=13 H=6 M=2. 输入格式: 第一行 ...

  4. 微信小程序首页总结

      效果图如下 首先从大的方面来讲,就是设置了window的属性 "navigationBarBackgroundColor": "#AFE2E6",//bar ...

  5. 6.Java集合总结系列：常见集合类的使用（List/Set/Map）

    MARK 总结: Set.List 和 Map 可以看做集合的三大类. List集合是有序集合,集合中的元素可以重复,访问集合中的元素可以根据元素的索引来访问. Set集合是无序集合,集合中的元素不可 ...

  6. DCN路由操作

    offset */interface in/out access-list/prefix-list <1-16>                 // 修改路由偏移量   RIP偏移列表 ...

  7. WPF 中使slide控件拖动完成后改变变量值

    这个问题一开始觉得还是挺简单的,网上也看到不少解决方案. 首先一个最简单最直接的方案就是自定义一个名为FinalValue的依赖属性.随后重载OnThumbDragCompleted函数,在Thumb ...

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

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

  9. idea2015的使用心得

    今天打开myeclipse感觉里面全是project,也懒着换地方了,因为这些代码还要时常看,索性安装了idea试试水,感觉还不错,用起来并不比myeclipse差,跟webstorm差不多,他俩就是 ...

  10. 在IntelliJ IDEA中添加repository模板

    可以用于快速新建一个repository类,减少开发时间 在IntelliJ IDEA settings设置中(ctrl+alt+s)--Editor--File and Code Templates ...