<!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. Codeforces Global Round 1 (CF1110) （未完结，只有 A-F）

    Codeforces Global Round 1 (CF1110) 继续补题.因为看见同学打了这场,而且涨分还不错,所以觉得这套题目可能会比较有意思. 因为下午要开学了,所以恐怕暂时不能把这套题目补 ...

  2. SDOI2018凉凉记

    好久没有更博客了...因为我在颓废学习.. SDOI一轮结束了...我也该回来学地生了... 凉凉 ————————————————我是分割线———————————————— Day0 愉快感冒的Da ...

  3. shell编程程序实例

    1.计算器 #!/bin/bash #test #by authors hdc 2018 function add(){ #实现加法 c=$[ $a + $b ] #相加 echo $c } func ...

  4. Centos6安装zabbix-agent

    一.安装yum源 rpm -ivh https://repo.zabbix.com/zabbix/3.4/rhel/6/x86_64/zabbix-release-3.4-1.el6.noarch.r ...

  5. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  6. POJ 3481 Double Queue (treap模板)

    Description The new founded Balkan Investment Group Bank (BIG-Bank) opened a new office in Bucharest ...

  7. delphi 控件背景透明代码

    procedure DrawParentBackground(Control: TControl; DC: HDC; R: PRect = nil; bDrawErasebkgnd: Boolean ...

  8. BZOJ 3687: 简单题(dp+bitset)

    传送门 解题思路 设\(f(i)\)表示和为\(i\)时的方案数,那么转移方程为\(f(i)+=f(i-x)\),\(x\)为当前枚举到的数字,这样做是\(O(n\sum a_i)\)的,考虑优化.发 ...

  9. 2018-2019-2 网络对抗技术 20165206 Exp 9 Web安全基础

    - 2018-2019-2 网络对抗技术 20165206 Exp 9 Web安全基础 - 实验任务 本实践的目标理解常用网络攻击技术的基本原理,做不少于7个题目,共3.5分.包括(SQL,XSS,C ...

  10. MySQL复制表结构和内容到另一个表中

    一:(低版本的mysql不支持,mysql4.0.25 不支持,mysql5已经支持了)1.复制表结构到新表CREATE TABLE 新表LIKE 旧表 2.复制旧表的数据到新表(假设两个表结构一样) ...