当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. curl book

    curl是利用URL语法在命令行方式下工作的开源文件传输工具.它被广泛应用在Unix.多种Linux发行版中,并且有DOS和Win32.Win64下的移植版本. 官方地址 man page 下载页面, ...

  2. echarts迁徙图

    前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个 预览地址: https://gallery.echartsjs.com/editor.html?c=xYS-YtzOa ...

  3. 关于virtual box 虚拟机使用

    关于virtual box的使用,如果想用共享文档:比如当前系统为Ubuntu,virtual box安装了win7,win7与Ubuntu之间的文件使用,就可以利用 共享文档 这个便利的功能—— 在 ...

  4. JVM原理以及深度调优（二）

    JVM内存分配 内存分配其实真正来讲是有三种的.但对于JVM来说只有两种 栈内存分配: 大家在调优的过程中会发现有个参数是-Xss 默认是1m,这个内存是栈内存分配, 在工作中会发现栈OutOfMem ...

  5. POJ1475 推箱子---模块化思想

    自古逢秋悲寂寥,我言秋日胜春朝. 晴空一鹤排云上,便引诗情到碧霄. --刘禹锡 题目:推箱子 网址:http://poj.org/problem?id=1475 推箱子游戏相信大家都不陌生,在本题中, ...

  6. 【集群实战】NFS网络文件共享服务3-相关知识补充（showmount,exports,rpc）

    1. showmount命令说明 showmount命令一般用于从NFS客户端检查NFS服务器端共享目录的情况. 参数说明: -e,--exports 显示NFS服务器输出的目录列表 [root@we ...

  7. 初学dp心得

    从STL到贪心,再到现在的动态规划,可以说动态规划真的让我学的有点蒙,对于一些题目,会做,但是不会用DP,现在还不能熟练的写出状态转移方程,更重要的是,自己宛如一个哺乳期的小孩,做题需要套模板,没有模 ...

  8. MYSQL数据库配置安装、重置密码以及工具连接

    一.下载mysql安装包 下载地址:https://dev.mysql.com/downloads/mysql/ 下载解压好之后,就是一个文件夹的形式. 二.配置环境变量 环境变量的配置,就是把MyS ...

  9. Java——多线程之Lock锁

    Java多线系列文章是Java多线程的详解介绍,对多线程还不熟悉的同学可以先去看一下我的这篇博客Java基础系列3:多线程超详细总结,这篇博客从宏观层面介绍了多线程的整体概况,接下来的几篇文章是对多线 ...

  10. Linux的vi和vim编辑器

    Linux中分为:一般模式,插入模式和底行模式 一般模式(通过按iaoIAO键)-->插入模式 插入模式(按Esc键)--> 一般模式 一般模式(通过按:键)-->底行模式 底行模式 ...