使用JavaScript触发过渡效果的方法


Posted in Javascript onJanuary 19, 2017

使用 :hover 和 :focus 这样的伪类,我们可以很方便的将元素从一个样式切换到另一个样式,而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡(即在代码中触发过渡)也是可以实现的。

和普通过渡一样,先创建两个样式规则,一个是元素的初始状态,一个是过渡结束的状态。然后用 js 在合适的事机修改对应元素的样式即可。

下面以一个日夜景图片切换的样例演示:

使用JavaScript触发过渡效果的方法使用JavaScript触发过渡效果的方法

(1)日景和夜景是两张图片叠在一起的。夜景图初始透明度是0,覆盖在日景图上方。

(2)点击“看夜景”按钮,夜景图透明度逐渐从0过渡到1,看起来画面慢慢变成夜景。

(3)点击“看日景”按钮,夜景图透明度逐渐又从1过渡到0,看起来画面恢复成日景。

在线样例如下:

<!doctype html>
<html lang="en">
<head>
<title>hangge.com</title>
<style>
img {
  position:absolute;
  transition: opacity 5s;
  -webkit-transition: opacity 5s;
}
.solid {
  opacity: 1;
}
.transparent {
  opacity: 0;
}
</style>
<script>
  function toNight(){
      var nightImage = document.getElementById("nightImage");
      nightImage.className = "solid";
  }
  function toDay(){
      var nightImage = document.getElementById("nightImage");
      nightImage.className = "transparent";
  }
</script>
</head>
<body>
  <button onclick="toNight()">看夜景</button>
  <button onclick="toDay()">看日景</button>
  <div>
    <img src="day.png" alt="日景"/>
    <img src="night.png" alt="夜景" id="nightImage" class="transparent"/>
  </div>
</body>
</html>

以上所述是小编给大家介绍的使用JavaScript触发过渡效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
详解支持Angular 2的表格控件
Jan 19 #Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 #Javascript
JS生成一维码(条形码)功能示例
Jan 19 #Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 #Javascript
javascript中json基础知识详解
Jan 19 #Javascript
JavaScript实现垂直滚动条效果
Jan 18 #Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 #Javascript
You might like
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
Javascript的闭包
2009/12/31 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
Python中取整的几种方法小结
2017/01/06 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
学校运动会开幕演讲稿
2014/01/04 职场文书
cf收人广告词大全
2014/03/14 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
创业计划书之养殖业
2019/10/11 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript