当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. v&n赛 ML 第一步（python解决）

    题目链接 给了70组x,y,根据提示,是求拟合曲线,再通过x求y 知道MATLAB应该录入就能解决吧,但是没下这软件,试试用python解决 #coding:utf- from pwn import ...

  2. C# WCF 之优势及特性

    Windows Communication Foundation(WCF)是由微软开发的一系列支持数据通信的应用程序框架,可以翻译为Windows 通讯开发平台. 整合了原有的windows通讯的 . ...

  3. df卡住的解决办法

    在使用网络存储时,如果网络存储出问题.比如使用NFS,网络中断,df -h会卡住 情形一 ctrl+c是能取消中断的,这种情况算是比较幸运.使用mount查看有哪些挂载点,将其卸载即可. 情形二 ct ...

  4. golang依赖管理

    目录 使用GOPATH管理依赖 临时GOPATH 依赖查找路径 使用GOVENDER管理依赖 使用GO111MODULE管理依赖 Usage 常用命令列表 不常用命令 使用示例 开启GO111MODU ...

  5. 数值计算方法实验之newton多项式插值 (Python 代码)

    一.实验目的 在己知f(x),x∈[a,b]的表达式,但函数值不便计算或不知f(x),x∈[a,b]而又需要给出其在[a,b]上的值时,按插值原则f(xi)=yi (i=0,1,……, n)求出简单函 ...

  6. TensorFlow keras读取图片

    from tensorflow.python.keras.preprocessing.image import load_img,img_to_array def main(): #tagert_si ...

  7. Synchronization and Overlapped Input and Output

    You can perform either synchronous or asynchronous (also called overlapped) I/O operations on files, ...

  8. Gym 101194D Ice Cream Tower

    被一道数位DP折磨得欲仙欲死之后,再做这道题真是如同吃了ice cream一样舒畅啊 #include<bits/stdc++.h> using namespace std; #defin ...

  9. 【集群实战】Rsync常见错误总结

    1. 服务端指定模块没有对应目录 报错详情: @ERROR: chdir failed rsync error: error startingclient-server protocol (code ...

  10. 将不确定变成确定~LINQ DBML模型可以对应多个数据库吗

    答案是肯定的,一个DBML模型可以对应多个数据库,只要数据库中的表与模型中定义的表结构完成相同,就可以这个技术,我们可以用来开发一些通用的功能模块,如通过后台管理模块,我们将一些通用表进行抽象,如,对 ...