Bootstrap入门(二十五)JS插件2:过渡效果

时间:2022-12-30 12:25:22

Bootstrap入门(二十五)JS插件2:过渡效果

对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译(或压缩)版的bootstrap.js 文件,就无需再单独将其引入了。

Transition.js 是针对 transitionEnd 事件的一个基本辅助工具,也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。

Bootstrap入门(二十五)JS插件2:过渡效果

通过代码啦展现一下

先创建一个有id的div,这里div的id为mydiv,内容直接为空

        <div id="mydiv">

        </div>

为他添加一些样式,#mydiv下的是刚打开页面时的样式,而#mydiv:hover是鼠标滑过时的样式

宽度变成原来的四倍,红色的,2s完成

         <style>
#mydiv{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
#mydiv:hover{
width: 400px;
}
</style>

然后,为这个过渡效果写一些js代码

        <script>           
         document.getElementById("mydiv").addEventListener("transitionend",function(e){
this.innerHTML = "过渡事件,完成"
})
</script>

初始效果

Bootstrap入门(二十五)JS插件2:过渡效果

鼠标滑过时:渐渐变宽

Bootstrap入门(二十五)JS插件2:过渡效果

最终,显示文字

Bootstrap入门(二十五)JS插件2:过渡效果

Bootstrap入门(二十五)JS插件2:过渡效果的更多相关文章

  1. Bootstrap &lt&semi;基础二十五&gt&semi;警告(Alerts)

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  2. Bootstrap入门(十五)组件9:面板组件

    Bootstrap入门(十五)组件9:面板组件 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 1.基本实例 2.带标题的面板 3.情景效果 ...

  3. 网站开发进阶&lpar;二十五&rpar;js如何将html表格导出为excel文件

    js如何将html表格导出为excel文件        赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...

  4. &lbrack;WebGL入门&rsqb;二十五,点光源的光照

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:].另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指 ...

  5. Bootstrap &lt&semi;基础二十八&gt&semi;列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  6. Bootstrap &lt&semi;基础二十九&gt&semi;面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  7. Bootstrap &lt&semi;基础二十六&gt&semi;进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  8. Bootstrap&lt&semi;基础二十四&gt&semi; 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  9. Bootstrap &lt&semi;基础二十二&gt&semi;超大屏幕(Jumbotron)

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  10. Bootstrap&lt&semi;基础二十&gt&semi; 标签

    Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html&gt ...

随机推荐

  1. POJ3693 Maximum repetition substring &lbrack;后缀数组 ST表&rsqb;

    Maximum repetition substring Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9458   Acc ...

  2. RxSwift 系列&lpar;六&rpar; -- Mathematical and Aggregate Operators

    前言 本篇文章将要学习RxSwift中数学和集合操作符,在RxSwift中包括了: toArray reduce concat toArray 将一个Observable序列转化为一个数组,并转换为一 ...

  3. 基于PLC-C&num;串口通讯,温度检测和转速监控的c&num;&sol;&period;Net实现。

    我司为五金加工企业,其中有一条喷涂车间和流水线,客户要求能实时监控炉温温度.流水线速,并设置上下限值,达到上下限时报警. 开始考虑过USB的温度采集器,但是却没有找到带USB的光电开关,并且线路长度受 ...

  4. python基础学习篇章一

    一. 对Python的认识 1. Python的标准实现方式是将源代码的语句编译为字节码的形式,之后再将字节码解释出来.由于字节码是一种与平台无关的形式,字节码具有可移植性.但是Python没有将代码 ...

  5. iOS开发者学习Flutter

    Flutter for iOS 开发者 本文档适用那些希望将现有 iOS 经验应用于 Flutter 的开发者.如果你拥有 iOS 开发基础,那么你可以使用这篇文档开始学习 Flutter 的开发. ...

  6. redis 在 php 中的应用(key篇)

    本文为我阅读了 redis参考手册 之后结合 博友的博客 编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) 目录: KEY(键) DEL           ...

  7. 1159 Palindrome

    Palindrome Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 68562   Accepted: 23869 Desc ...

  8. Codeforces Round &num;539 &lpar;Div&period; 2&rpar; D 思维

    https://codeforces.com/contest/1113/problem/D 题意 将一个回文串切成一段一段,重新拼接,组成一个新的回文串,问最少切几刀 题解 首先无论奇偶串,最多只会切 ...

  9. StringRedisTemplate操作redis数据

    StringRedisTemplate与RedisTemplate区别点 两者的关系是StringRedisTemplate继承RedisTemplate. 两者的数据是不共通的:也就是说String ...

  10. sql 表,字段(列),表数据(行)相关命令

    随便转载,保留出处:http://www.cnblogs.com/aaron-agu/ 注: 以下所有操作都在登陆数据库后执行 命令use test;  test为数据库名 查看表 show tabl ...