<!DOCTYPE html>

<html <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>下拉菜单</title>

    <link href="css/bootstrap.min.css" rel="stylesheet" type=text/css"/>

    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <style>

        #mydiv{

            width:200px;

            height:200px ;

            background:seagreen ;

            transition:height 4s;

            -webkit-transition:height  4s;

        }

        #mydiv:hover {

        height:400px ;

        }

    </style>

</head>

<body>

<div id="mydiv">

</div>

<script>

    document.getElementById("mydiv").addEventListener("transitionend",function(e){

        this.innerHTML="动画效果";

    })

</script>

</body>

</html>

效果：

Bootstrap 过渡效果的更多相关文章

  1. Bootstrap 过渡效果 transition.js源码分析

    前言: 阅读建议:去github下载一个完整dom然后把,本篇代码复制进去然后运行就好了以地址 Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,那么判 ...

  2. bootstrap 教程分享

    Bootstrap 教程 Bootstrap 简介 Bootstrap 环境安装 Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 排版 Bootstrap 代码 B ...

  3. Bootstrap-Plugin：过渡效果（Transition）插件

    ylbtech-Bootstrap-Plugin:过渡效果(Transition)插件 1.返回顶部 1. Bootstrap 过渡效果(Transition)插件 过渡效果(Transition)插 ...

  4. atitit。html css框架Bootstrap  Foundation的比较与不同 attilax大总结

    atitit.html css框架Bootstrap  Foundation的比较与不同 attilax大总结 1. Bootstrap  Foundation的比较与不同1 2. Bootstrap ...

  5. [web建站] 极客WEB大前端专家级开发工程师培训视频教程

    极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...

  6. Bootstrap入门（二十五）JS插件2：过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  7. Bootstrap JavaScript插件

      在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...

  8. 初学者--bootstrap（五）JavaScript插件（上）----在路上（6）

    jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...

  9. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

随机推荐

  1. 太恐怖了！黑客正在GPON路由器中利用新的零日漏洞

    即使在意识到针对GPONWi-Fi路由器的各种主动网络攻击之后,如果您还没有将其从互联网上带走,那么请小心,因为一个新的僵尸网络已加入GPON组织,该组织正在利用未公开的零日漏洞(零时差攻击). 来自 ...

  2. MySQL入门常用命令

    使用本地 MySQL,系统 Ubuntu. mysql -u root -p 输入 root 用户的密码进入MySQL: mysql>

  3. Testng报错:method-selectors?,parameter*,groups?,packages?,classes?

    以上的报错信息有两种可能的原因: 1.xml的格式确实有误 2.xml的格式正确,但是工程中testng的jar包不止一个,从而导致有歧义或者冲突(这个很可能发生在同一个workspace有多个工程的 ...

  4. Android工作两年之后的第一个App--天真无谐

    一.前言 好长时间没写blog了,主要还是工作上的事有点多,周末又得在家开发自己的app,所以时间真的不够用了,当然今天这篇文章主要就要说一下,工作两年的我如何从产品角度去做一个app,以及app的发 ...

  5. Outlets

    Outlets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  6. rabbitmqadmin命令行管理工具-4

    rabbitmqadmin命令行管理工具原文地址: https://www.cnblogs.com/wuzhiyuan/p/6856985.htmlhttps://www.cnblogs.com/mr ...

  7. AsyncTask2

    参考: AsyncTask - 简书http://www.jianshu.com/p/3b839d7a3fcf 前言 在android应用开发过程中,我们需要是时刻注意保证应用程序的稳定和UI操作响应 ...

  8. linux设备驱动第一篇：设备驱动程序简介

    首先,我们知道驱动是内核的一部分,那么驱动在内核中到底扮演了什么角色呢? 设备驱动程序在内核中的角色:他们是一个个独立的“黑盒子”,使某个特定的硬件响应一个定义良好的内部编程接口,这些接口完全隐藏了设 ...

  9. Where should I put <script> tags in HTML markup?

    Where should I put <script> tags in HTML markup? When embedding JavaScript in an HTML document ...

  10. python 访问 网页 获得源码

    >>> from urllib.request import urlopen >>> for line in urlopen('http://tycho.usno. ...