当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. Java中集合的嵌套

    集合的嵌套遍历 获取10个1-20之间的随机数,要求不能重复 键盘录入多个数据,以0结束,要求在控制台输出这多个数据的最大值. public static void main(String[] arg ...

  2. 类内部装饰器的使用：property、classmethod与staticmethod

    1.property property是一种特殊的属性,可实现把函数名变为属性名使用.它可以在不改变类接口的前提下使用存取方法 (即读值和取值) 来修改数据的属性,property类有3个方法gett ...

  3. 易学又实用的新特性:for...of

    今天带来的知识点既简单又使用,是不是感觉非常的棒啊,OK,不多说了,咱们开始往下看. for...of 是什么 for...of 一种用于遍历数据结构的方法.它可遍历的对象包括数组,对象,字符串,se ...

  4. 萌新带你开车上p站（番外篇）

    本文由“合天智汇”公众号首发,作者:萌新 前言 这道题目应该是pwnable.kr上Toddler's Bottle最难的题目了,涉及到相对比较难的堆利用的问题,所以拿出来分析. 登录 看看源程序 程 ...

  5. XSS Cheat Sheet(basics and advanced)

    XSS Cheat Sheet BASICS HTML注入 当输入位于HTML标记的属性值内或标记的外部(下一种情况中描述的标记除外)时使用.如果输入在HTML注释中,则在payload前加上&quo ...

  6. PHP 构造方法 __construct()

    PHP 构造方法 __construct() PHP 构造方法 __construct() 允许在实例化一个类之前先执行构造方法. 构造方法 构造方法是类中的一个特殊方法.当使用 new 操作符创建一 ...

  7. python学习04数据

    #1.**幂 //返回商的整数部分x=5y=3print(x**y)print(x//y)print(5/2)#2.复数a+bjc=2+5jprint(c.real)#返回复数的实部print(c.i ...

  8. java并发Exchanger的使用

    目录 简介 类定义 类继承 构造函数 两个主要方法 具体的例子 结语 简介 Exchanger是java 5引入的并发类,Exchanger顾名思义就是用来做交换的.这里主要是两个线程之间交换持有的对 ...

  9. oracle查询当前系统时间前10天的数据

    select * from eo_c_order t where t.create_time>systimestamp-interval'1'day; 转载于:https://www.cnblo ...

  10. 本周ASP.NET英文技术文章推荐[02/03 - 02/16]：MVC、Visual Studio 2008、安全性、性能、LINQ to JavaScript、jQuery...

    摘要 继续坚持,继续推荐.本期共有9篇文章: 最新的ASP.NET MVC框架开发计划 Visual Studio 2008 Web开发相关的Hotfix发布 ASP.NET安全性教程系列 ASP.N ...