<!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. Codefroces 958C2 - Encryption (medium) 区间dp

    转自:https://www.cnblogs.com/widsom/p/8857777.html     略有修改 题目大意: n个数,划分为k段,每一段的和mod p,求出每一段的并相加,求最大是多 ...

  2. java中的进制转换以及字符串类和数值类的相互转化

    import java.util.*; import java.io.*; import java.math.*; import java.math.*; public class Main { pu ...

  3. BZOJ3926 诸神眷顾的幻想乡

    传送门 树上SAM! 显然如果树上一条一条字符串放的话那么是n^2的w 但是 题目的性质非常吼啊! 20个叶子节点 我们就可以 把所有叶子结点拎出来当根 全部扔到一个SAM里 就吼啦 最后的答案是   ...

  4. Nmon监控服务端性能

    一.安装1.查看服务器操作系统的版本信息 lsb_release -a cat /etc/*release2.下载 a.nmon下载地址:http://nmon.sourceforge.net/pmw ...

  5. linux 文件及目录结构体系

    linux 目录的特点: 1). /是所有目录的顶点 2).目录结构像一颗倒挂的树 3).目录和磁盘分区是没有关联的 4)./下不同的目录可能对应不同的分区或磁盘 5).所有的目录都是按照一定的类别有 ...

  6. git私立的代码库邀请合作者步骤

    第一步,点击setting,如下图: 第二步输入对方的用户名,点击添加. 第三步拷贝链接给对方,等待对方访问加入. 对方访问后可以看到: 加入就可以了 然后对方可以看到:

  7. TCP/IP协议 和 如何实现 互联网上点对点的通信

    1.参考:https://www.cnblogs.com/onepixel/p/7092302.html   TCP/IP 协议采用4层结构,分别是应用层.传输层.网络层 和 链路层   http 属 ...

  8. NOIp 图论算法专题总结 (3)：网络流 & 二分图 简明讲义

    系列索引: NOIp 图论算法专题总结 (1) NOIp 图论算法专题总结 (2) NOIp 图论算法专题总结 (3) 网络流 概念 1 容量网络(capacity network)是一个有向图,图的 ...

  9. tom

    题目描述 众所周知,Tom 猫对香肠非常感兴趣.有一天,Tom 家里的女主人赏给了Tom 一大堆香肠.这些香肠太多了,以至于Tom 一顿吃不完,于是它把这些香肠串成了一棵树,树的每个节点上都有一个香肠 ...

  10. 转载：Linux下启动和关闭Weblogic（管理服务器+被管服务器）

    转载自:http://www.cnblogs.com/nick-huang/p/3834134.html  感谢! Weblogic的管理服务器和被管服务器的启动.关闭,偶尔会用到,却又不常用,导致需 ...