当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. 使用vue.js封装一个包含图片的跑马灯组件

    初衷: 学习完Vuejs后,来准备练习仿写一下老东家的门户页面,主要是为了熟悉一下常用插件的使用,比如video.js,wow.js,swiper等等:而其中涉及到一个包含图片跑马灯组件,大概长这样( ...

  2. async,await与task.wait()或task.Result的区别

    你是否曾经与我一样不理解async,await与task.wait()或者task.Result的区别? 接下来,一个Demo让你看出他们之间的区别. static void Main(string[ ...

  3. Asp.Net Core 3.1 的启动过程5

    前言 本文主要讲的是Asp.Net Core的启动过程,帮助大家掌握应用程序的关键配置点. 1.创建项目 1.1.用Visual Studio 2019 创建WebApi项目. 这里面可以看到有两个关 ...

  4. php +go关键字实现协程

    来源: https://studygolang.com/articles/17631?fr=sidebar 今天在知乎浏览时忽然发现了一个有趣的东西,php竟然可以实现协程的实现,而且还是通过go关键 ...

  5. 详解封装源码包成RPM包

    源码编译安装是最常用安装软件方式,可是面对工作量巨大时候就需要我们的RPM包上场了,统一的模块,一键安装.在面对一定数量的服务器上,RPM就可以为我们节省大量的时间. RPM可以在网上下载,但是当我们 ...

  6. 虚拟化KVM之安装(二)

    安装KVM虚拟化 1.系统基础环境: [root@linux-node1 ~]# ip addr | grep inet | awk '{ print $2; }' | sed 's/\/.*$//' ...

  7. java中interrupt,interrupted和isInterrupted的区别

    文章目录 isInterrupted interrupted interrupt java中interrupt,interrupted和isInterrupted的区别 前面的文章我们讲到了调用int ...

  8. IDEA 之 常用快捷键

    1. 编辑 No. 快捷键 功能描述 01 Ctrl+Space 补全代码 02 Ctrl+Shift+Space 补全代码,添加分号结束符 03 Ctrl+q 展示某个类或方法的API说明文档 04 ...

  9. 推荐3个Python初学者学习Python案例

    回复资料,获取最新的Python的资料.想学习Python可以加微信回复报名. 希望今天的分享3个小案例,对你学习Python有帮助 Python 九九乘法表 以下实例演示了如何实现九九乘法表: 实例 ...

  10. Pointers and Memory

    Stanford CS Education Library #102 一.Basic Pointers 指针主要有两个用途:使不同的代码段共享信息.方便链表(树)的处理. 指针示意图: derefer ...