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

动画过渡(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
提交
取消
全部 精华 我要发布

最新回答 / 慕梦前来
应该是你的z-index的层级没有处理好,

最新回答 / 慕虎8125020
他http的js老是错的,你可以放自己的编程软件中测试,当然要引用bootsrap的css和js,就会有触发效果了,试试看

最新回答 / qq_渐行渐远渐无书_2
引用地址不对,换这个可以:<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

最赞回答 / 慕丝5673744
把最下面两个js插件链接换成https就可以了<script src="https://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script><script src="https://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>

最新回答 / 慕标1455184
因为他添加了一个样式,点击的时候添加一条边框

最新回答 / LifeinaDay
代码没有效果,一 可能是你引入库错误 二可能是你代码写错.你一句没有效果,代码也不贴上来在这里问什么?

最新回答 / 小白一枚求指点
按钮没有反应是因为js文件错误 将jQuery文件改成<script src="http://libs.baidu.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 就行了

已采纳回答 / 拟人
是的,文章有说明的。如下:Bootstrap框架默认给各个组件提供了基本动画的过渡效果,如果要使用,有两种方法:  ☑ 调用统一编译的bootstrap.js;  ☑ 调用单一的过渡动画的JavaScript插件文件transition.js

最新回答 / 慕设计8442914
你是在本地做测试的吗,本地测试,看路径对了没,如果网页测试那只能用地址了

最新回答 / 星空下的小孩
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">你重新引入一下CSS文件        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>jQuery文件        <script src="http://cdn.bootcss.c...

最新回答 / xyyiii
没必要解决吧.最多是没有特效.而且.还有必要支持IE6吗?还用IE6的用户,也不在乎这点特效....

已采纳回答 / 弹吉他的卡农
应用的js不同 上一节是整个bootstrap.js全引用了,而这一节只应用了其中的modal.js,这样可能会导致data-backdrop的默认属性发生变化,这样就出现了区别

最新回答 / echo_kinchao
这个可以用css3来写

已采纳回答 / 李晓健
先看路径是不是对的,然后看这两个js是不是同一个,最后看这个js是不是有什么依赖你没有引

最新回答 / 李晓健
帖代码
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言