当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. 浅析 CSS 中的边距重叠

    浅析 CSS 中的边距重叠 边距重叠是什么 在说边距重叠之前,先以正常的思维来考虑如果你现在是浏览器引擎遇到这种情况应该怎么办? 现在有两个元素 div1 和 div2 紧挨着,中间没有它元素,它们的 ...

  2. ASP.NET母版页

    ASP.NET母版页:主要是设置一致界面的页面,在固定的页中进行更新. 如图1-1所示 页头 页中(页内容) 页尾 图1-1  母版页 一般网页是固定页头和页尾,只更新页内容,来实现网页的跳转或内容的 ...

  3. fasttext的使用，预料格式，调用方法

    数据格式:分词后的句子+\t__label__+标签 fasttext_model.py from fasttext import FastText import numpy as np def ge ...

  4. PHP反序列化漏洞总结（二）

    写在前边 之前介绍了什么是序列化和反序列化,顺便演示了一个简单的反序列化漏洞,现在结合实战,开始填坑 前篇:https://www.cnblogs.com/Lee-404/p/12771032.htm ...

  5. Python selenium Chrome正在受到自动软件的控制 disable-infobars无效 的解决方法

    问题解决 前两天更新了google浏览器版本,今天运行以前的脚本,发现options一个参数的配置不生效了. 运行了几次都发现该参数没有生效,也检查了自己的代码参数,没有写错,于是就有了这一波“网中寻 ...

  6. PHP 把MYSQL重复ID 二维数组重组为三维数组

    应用场景 MYSQL在使用关联查询时,比如 产品表 与 产品图片表关联,一个产品多张产品图片,关联查询结果如下: $arr=[['id'=>1,'img'=>'img1'],['id'=& ...

  7. CG-CTF（6）

    CG-CTF https://cgctf.nuptsast.com/challenges#Web 续上~ 第三十一题:综合题2 查看本CMS说明: 分析: ①数据库表名为admin:字段名为usern ...

  8. 一千行mysql笔记

    原文地址:https://shockerli.net/post/1000-line-mysql-note/ /* Windows服务 */ -- 启动MySQL net start mysql -- ...

  9. java 之 jsp简介

    什么是jsp? JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. JSP是一种Java ...

  10. Django中修改DATABASES后，执行python manage.py ****报错！UnicodeEncodeError

    Django中修改DATABASES后,执行python manage.py ****报错!UnicodeEncodeError: 'latin-1' codec can't encode chara ...