<!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. BZOJ3622 已经没有什么好害怕的了 二项式反演+DP

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=3622 题解 首先显然如果 \(n - k\) 为奇数那么就是无解.否则的话,"糖果& ...

  2. 真的,移动端尺寸自适应与dpr无关

    做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解. 1. 什么是尺寸自适应 首先标题说的自适应, ...

  3. 转：C++ 11 Lambda表达式

    转:https://www.cnblogs.com/DswCnblog/p/5629165.html C++11的一大亮点就是引入了Lambda表达式.利用Lambda表达式,可以方便的定义和创建匿名 ...

  4. Java Web学习总结（9）学习总结-JSTL

    一,JSTL概述 JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能.jstl出现的目的同el一样也是要代替jsp页 ...

  5. JS中的立即执行函数

    JS 立即执行函数可以让函数在创建后立即执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 1.立即执行函数的写法 立即执行函数通常有下面两种写法: //第一种写法 (func ...

  6. javascript is ths best computer language

    alert('javascript is one of the best computer languages')

  7. k-近邻算法（kNN）测试算法：作为完整程序验证分类器

    #测试算法:作为完整程序验证分类器 def datingClassTest(): hoRatio = 0.10 #设置测试集比重,前10%作为测试集,后90%作为训练集 datingDataMat,d ...

  8. 防止NSTimer和调用对象之间的循环引用

    防止NSTimer和调用对象之间的循环引用 @interface NSTimer (EOCBlocksSupport) + (NSTimer *)eoc_scheduledTimerWithTimeI ...

  9. 20175213 2018-2019-2 《Java程序设计》第11周学习总结

    教材学习内容总结 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符(Uniform Resource Locator),使用URL创建对象的应用程序称作客户端程序 U ...

  10. 北风设计模式课程---解释器模式（Interpreter Pattern）

    北风设计模式课程---解释器模式(Interpreter Pattern) 一.总结 一句话总结: 不仅要通过视频学,还要看别的博客里面的介绍,搜讲解,搜作用,搜实例 设计模式都是对生活的抽象,比如用 ...