当css属性改变的时候,控制animation的速度,让属性的变化发生在一段时间之内,而不是立即生效。

语法

transition: <property> <duration> <timing-function> <delay>;

property:css属性的name, 支持的属性列表

duration:持续时间

timing-function:运动曲线

一个折叠菜单例子:

 <style type="text/css">
ul, li{
list-style:none;
float: left;
}
ul.menu {
overflow: hidden;
width: 50px;
height: 50px;
}
ul.fold {
width: 0px;
height: 0px;
transition: width 1s, height 1s;
-webkit-transition: width 1s, height 1s;
-moz-transition: width 1s, height 1s;
-o-transition: width 1s, height 1s;
}
ul.unfold {
width: 50px;
height: 50px;
background-color: #fff;
transition: width 1s, height 1s;
-webkit-transition: width 1s, height 1s;
-moz-transition: width 1s, height 1s;
-o-transition: width 1s, height 1s;
}
</style

css

html:

 <ul class="menu unfold" id="menu1">
<li>11111111</li>
<li>22222222</li>
</ul>

js:

 var v1 = document.getElementById("menu1");
function flod(){
className = v1.className;
v1.className = "menu" + (/\s+fold/.test(className) ? " unfold" : " fold");
}
v1.addEventListener("click", flod, false);

检测transition完成

transition完成后transitionend事件将被触发,如果transition还没有完成就被abort,将不会触发transitioned事件

 v1.addEventListener('transitionend', function(e){
alert(e.propertyName + "|" + e.elapsedTime);
});

js

在webkit中事件名称是webkitTransitionEnd,可以查看兼容列表

transition让js function过度更平滑

p {
padding-left: 60px;
} #foo {
border-radius: 50px;
width: 50px;
height: 50px;
background: #c00;
position: absolute;
top:;
left:;
-webkit-transition: all 1s;
transition: all 1s;
}

Css

html:

<p>Click anywhere to move the ball</p>
<div id="foo"></div>

js:

var f = document.getElementById('foo');
var info = document.getElementById('eventInfo');
document.addEventListener('click', function(ev){
f.style.left = (ev.clientX-25)+'px';
f.style.top = (ev.clientY-25)+'px';
},false);

当鼠标点击页面的时候,红色的圆会在1s内运动到当前位置。

浏览器兼容

Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
-webkit-transition -moz-transition 10 -o-transition -webkit-transition

webkitTransitionEnd

4.0 (2.0) 10 10  oTransitionEnd
12  otransitionend
12.10   transitionend
webkitTransitionEnd

css3动画-transition的更多相关文章

  1. CSS3动画 transition和animation的用法和区别

    transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc - ...

  2. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  3. 大厂前端带来css3动画transition的使用和介绍全新认识动画

    CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体 ...

  4. css3动画transition详解2

    transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition ...

  5. css3 动画 Transition

      CSS Transition 1.1 基本用法 在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的.也就是说,所有的状态变化,都是即时完成. 上面是一个演示,当鼠标放置 ...

  6. css3动画transition详解

    一.transition-property 语法: transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ] ...

  7. css3动画入门transition、animation

    css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...

  8. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  9. css3动画属性中的transition属性

    一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...

随机推荐

  1. VIM继承C语言(转)

    在下面的基础上加上了astyle sh.c --style=kr --indent=spaces --indent-cases --pad-header --pad-oper --unpad-pare ...

  2. cell reuse & disposebag

    For my project I've made base cell class TableViewCell: UITableViewCell { private(set) var disposeBa ...

  3. 源代码管理工具-GIT

    源代码管理工具-GIT ---- 一. 掌握 - git 概述 1. git 简介? 什么是git? git是一款开源的分布式版本控制工具在世界上所有的分布式版本控制工具中,git是最快.最简单.最流 ...

  4. Android Camera(一)

    最近老大交给了一个任务,说是要在本地视频端很够调节摄像头焦距. 碰到了一些问题: 1.手机支不支持摄像头变焦 2.系统自带摄像软件可以变焦,但是自己编写的程序不支持变焦, 这个问题网上也有很多童鞋碰到 ...

  5. win8.1去掉鼠标右键回收站固定到开始菜单的方法

    win8.1去掉鼠标右键“回收站固定到开始菜单” 平台:win8.1 问题: 桌面“回收站”右键菜单里有个“固定到开始屏幕”,一不小心就误按,设法删之. 打开注册表编辑器.在注册表编辑器里面定位到:H ...

  6. android cts 命令的说明

    Host help showthis message 帮助文档 exit exitcts command line 退出CTS ls 全部用l替代,--plan直接用p替代,也即 l p .其他类似 ...

  7. Extjs视频

    Extjs视频http://www.youku.com/playlist_show/id_19343298.html ExtJs视频教程(关东升) 智捷关东升老师ExtJs视频教程AJAX框架-Ext ...

  8. magento 好好玩

    Magento更换服务器的方法   1.把magento的整个目录打包.上传到新服务器,把magento数据库导出,然后在新服务器上导入.如果导不进去的是因为magento的数据库使用了外键约束,通过 ...

  9. List<Map>去重排序

    数据格式 [ { "id":"d3e8a9d6-e4c6-4dd8-a94f-07733d3c1b59", "parentId":" ...

  10. sphinx multi valued filter

    publn_date is multi-valued <?php ini_set('memory_limit', '-1'); ini_set('max_execution_time', '10 ...