章节
问答
课签
笔记
评论
占位
占位

动画过渡(Transitions)

这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js

Bootstrap框架默认给各个组件提供了基本动画的过渡效果,如果要使用,有两种方法:

  ☑ 调用统一编译的bootstrap.js;

  ☑ 调用单一的过渡动画的JavaScript插件文件transition.js(右侧第29行引入Bootstrap上对外公布的transition.js的地址)

transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是,这些过渡动画都是采用CSS3来实现的,所以IE6-8浏览器是不具备这些过渡动画效果。

默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果:

  ☑ 模态弹出窗(Modal)的滑动和渐变效果;

  ☑ 选项卡(Tab)的渐变效果;

  ☑ 警告框(Alert)的渐变效果;

  ☑ 图片轮播(Carousel)的滑动效果。

右侧举了一个“模态弹出窗(Modal)的滑动和渐变效果”源代码例子。

任务

我来试试:可以把第29行代码去掉,查看“模态弹出窗”的“滑动渐变效果”还是否存在?

?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 时光境迁
fade确实是让modal有渐变特效的,bootstrap.js里已经包含了一系列的js,使用的时候只需要导入一个bootstrap.js即可!

已采纳回答 / qq_K_95
.sr-only类,span里的内容是隐藏的,这里应该是用来解释之前的<span aria-hidden="true">&times;</span>的,相当于是X效果的一个说明

最新回答 / qq_老夫当年很可爱_04380450
因为,浏览器不支持js的插件,你试着能到程序上

已采纳回答 / 醉清风tomorrow
不一定哦,你需要甄别

最新回答 / 慕哥5543641
bootstrap.js已经包含了这些js,同时官方也提供了单独的js, 如果你只需要某一个插件,可以只导入对应的js文件,或者导入bootstrap.js这个文件。

最赞回答 / 慕九州6986312
由于li里面的空间不足,所以弹窗div撑不开以导致这种现象,所以可以把<div class="modal fade" id="mymodal">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header"><button type="button" class="close" data-dismiss="mod...

最新回答 / giscafer
可以去掉,删除实验一下呗。你会发现modal-dialog有自己的样式,只是为了让弹窗样式效果更好。

已采纳回答 / aamk
都对不是吗?你要什么效果
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言