当transition事件完成时调用函数(移动端导航的动画消失效果)。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#d1 {
width:600px;
height:600px;
margin:100px auto;
border:1px solid;
}
#d2 {
width:300px;
height:300px;
margin:150px;
border-radius: 150px;
background: #ccc;
transition-duration: 2s;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<script>
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
d1.onclick = function(){
d2.style.width = "150px";
d2.style.height = "150px";
d2.style.borderRadius = "75px";
d2.style.background = "green";
};
d2.addEventListener("transitionend",function(){
d2.style.display = "none";
})
</script>
</body>
</html>

  

transition完成事件的更多相关文章

  1. js监听transition过渡事件

    html <div id="mydiv"> </div> style #mydiv{ width:100px; height:100px; backgrou ...

  2. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  3. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

  4. transition的局限

    transition的优点在于简单易用,但是它有几个很大的局限. (1)transition需要事件触发,所以没法在网页加载时自动发生. (2)transition是一次性的,不能重复发生,除非一再触 ...

  5. css动画——transition和animation

    http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...

  6. transition和animation动画简介

    本文介绍CSS动画的两大组成部分:transition和animation.我不打算给出每一条属性的详尽介绍,那样可以写一本书.这篇文章只是一个简介,帮助初学者了解全貌,同时又是一个快速指南,当你想不 ...

  7. css3动画transition animation

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

  8. 【CSS3】transition过渡和animation动画

    转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...

  9. transition的用法以及animation的用法

    http://www.cnblogs.com/xiaohuochai/p/5347930.html transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间: 触发过渡 单纯的代码不 ...

随机推荐

  1. asp.net core identity学习1

    ASP.NET Identity 学习 创建一个Asp.net core mvc项目 添加Nuget包: Microsoft.EntityFrameworkCore.SqlServer 3.1.3 M ...

  2. Java 多线程 -- 协作模型:生产消费者实现方式二:信号灯法

    使用信号灯法实现生产消费者模式需要借助标志位. 下面以演员表演,观众观看电视为列,写一个demo 同一资源 电视: //同一资源 电视 class Tv { String voice; // 信号灯 ...

  3. Liunx常用操作(二)-vim中删除命令

    VIM简介 Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性.VIM是自由软件.Vim普遍被推崇为类Vi编辑器中最好的一个,事实上真正的劲敌来自Ema ...

  4. python学习06循环

    '''while''''''while 布尔表达式:冒号不能省略''''''1+2+3+...+10'''i=1sum1=0while i<=10: sum1+=i i+=1print(sum1 ...

  5. 自定义spring boot的自动配置

    文章目录 添加Maven依赖 创建自定义 Auto-Configuration 添加Class Conditions 添加 bean Conditions Property Conditions Re ...

  6. KVM基本功能管理

    一.KVM基础功能管理 1.查看命令帮助 virsh -h 2.查看 KVM 的配置文件存放目录(CENTOS7.0.xml是虚拟系统实例的配置文件) ls /etc/libvirt/qemu     ...

  7. zabbix管理,添加监控主机

    一:添加本机为监控主机  二.监控其他Linux主机agent端 1.环境部署 [root@localhost ~]# hostname agent.zabbix.com[root@localhost ...

  8. CF1285 --- Dr. Evil Underscores

    CF1285 --- Dr. Evil Underscores 题干 Today as a friendship gift, Bakry gave Badawy \(n\) integers \(a_ ...

  9. android自定义View&自定义ViewGroup(上)

    一般自定义view需要重写的方法 void onMeasure(int widthMeasureSpec, int heightMeasureSpec) void onSizeChanged(int ...

  10. unittest(封装用例)

    from selenium import webdriver from time import sleep import unittest #导入unittest库 import HTMLTestRu ...