<!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. bzoj5049 [Lydsy1709月赛]导航系统 双向bfs

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5049 题解 题面里面满眼的随机.既然数据完全随机,那就是在锻炼选手的乱搞能力啊. 根据一个常用 ...

  2. bzoj4489 [Jsoi2015]地铁线路 最短路

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4489 题解 感觉又被骗了.看这道题的 AC 人数不多,以为是一道很好的题目.结果发现是一个非常 ...

  3. QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库

    解决方法: 终端命令:sudo apt-get install libqt4-dev sudo apt-get install libgstreamer0.10-dev sudo apt-get in ...

  4. C# 枚举的声名和使用

    namespace xxxxxx { public enum EnumTextHAlign { Left = , Center = , Right = } } using xxxxxx;

  5. POJ 3130 How I Mathematician Wonder What You Are! (半平面相交)

    Description After counting so many stars in the sky in his childhood, Isaac, now an astronomer and a ...

  6. div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器

    应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点 ...

  7. 如何在浏览器上安装 VueDevtools工具

    火狐浏览器直接打开附加组件中,搜索 VueDevtools,找到安装即可. 谷歌浏览器--更多工具--扩展程序--打开下载好的VueDevtools整体拖进去就行了

  8. intellijidea 设置字体等

    http://blog.csdn.net/asmcvc/article/details/17144951 1.下载安装AndroidStudio:http://developer.android.co ...

  9. 颁发不受浏览器信任的SSL证书

    xshell登录服务器,使用openssl生成RSA密钥及证书 # 生成一个RSA密钥 $ openssl genrsa -des3 -out tfjybj.key 1024 # 生成一个证书请求$ ...

  10. （转）VirtualBox下安装CentOS7系统

    转:https://www.cnblogs.com/hihtml5/p/8217062.html 本文假定你已经知道如何安装VirtualBox虚拟机软件,并且已经安装好了. 首先我们需要准备好cen ...