使用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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
限制只能输入数字的实现代码
May 16 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
详解支持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
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
SVG实现时钟效果
2018/07/17 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
用Python进行简单图像识别(验证码)
2018/01/19 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
详解python中的hashlib模块的使用
2019/04/22 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
某公司部分笔试题
2013/11/05 面试题
学习全国两会精神心得体会范文
2014/03/17 职场文书
任命书怎么写
2014/06/04 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
Go web入门Go pongo2模板引擎
2022/05/20 Golang