用js触发CSS3-transition过渡动画
用js触发CSS3-transition过渡动画
经过这几天的工作，让我进一步的了解到CSS3的强大，原本许多需要js才能实现的动画效果，现在通过CSS3就能轻易实现了，但是CSS3也有自身的不足，例如说在动画出发触发上就没有js灵活，因此我就开始考虑将CSS3与Js结合使用。
不过要注意CSS3属性兼容性问题
平时我们直接使用transition动画一般是这样的
鼠标放置在div方块上触发动画效果（鼠标悬浮div上即可触发）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.test{
background: red;
width: 100px;
height: 100px;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition:all 1s;
}
.test:hover{
background: red;
width: 200px;
height: 200px;
}
</style>
<body>
<div id="div" class="test"></div>
</body>
</html>现在如果想用js控制transition过渡动画怎么办呢？
最开始我是想和CSS控制动画一样，直接改变其className，但是发现没有动画效果。
后来经过了一番探索发现，通过dom操作其css属性就行了。
例如div 的css设置如下
div{
width:200px;
height:200px;
transition: all 1s;
}然后在js中通过dom操作来改变div的css的具体属性，如
obj.style.width="400px"
这时就会触发css的过渡动画。
下例为成功使用Js出发CSS3动画（鼠标点击触发）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.test{
background: red;
width: 100px;
height: 100px;
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition:all 1s;
}
</style>
<body>
<div id="div" class="test"></div>
<script type="text/javascript">
document.getElementById("div").onclick=function(){
document.getElementById("div").style.width="200px"
document.getElementById("div").style.height="200px"
}
</script>
</body>
</html>一个需要注意的地方：
今天在工作中无意发现，当元素本身为display：none 时，若此时我们想通过js先将其变为display:block 并且随后再触发其他想要的transition过渡效果，需要在 js改变其为display:block 后用setTimeout延迟100ms左右的时间再去设置其他过渡动画，否则该过渡动画不会触发。
有时间我会将其整理成另外一个博文。
用js触发CSS3-transition过渡动画的更多相关文章
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
- CSS3 transition过渡
transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...
- transition过渡动画
过渡动画必须写在<transition></transition>标签内,配合其他标签使用. 例子: <transition name="fade" ...
- JS框架_(JQuery.js)纯css3进度条动画
百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...
- CSS3 Transition 过渡
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动 ...
- js监听transition过渡事件
html <div id="mydiv"> </div> style #mydiv{ width:100px; height:100px; backgrou ...
- js实现css3的过渡，需要注意的一点（浏览器优化）
大部分浏览器对元素几何改变时候的重排做了优化.据说是这样子,一定时间内本应多次重排的改变,浏览器会hold住,仅一次重排.其中如果使用分离的一步处理过程,例如计时器,依然多次重排.例如,当我们应用tr ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- Js点击触发Css3的动画Animations、过渡Transitions效果
关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性 如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发 下例为Js点击触发过渡 ...
随机推荐
- 我的MYSQL学习心得（一） 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- LeetCode-5LongestPalindromicSubstring(C#)
# 题目 5. Longest Palindromic Substring Given a string S, find the longest palindromic substring in S. ...
- [原] KVM 虚拟化原理探究（2）— QEMU启动过程
KVM 虚拟化原理探究- QEMU启动过程 标签(空格分隔): KVM [TOC] 虚拟机启动过程 第一步,获取到kvm句柄 kvmfd = open("/dev/kvm", O_ ...
- jdb调试scala代码的简单介绍
在linux调试C/C++的代码需要通过gdb,调试java代码呢?那就需要用到jdb工具了.关于jdb的用法在网上大家都可以找到相应的文章,但是对scala进行调试的就比较少了.其实调试的大致流程都 ...
- QT内省机制、自定义Model、数据库
本文将介绍自定义Model过程中数据库数据源的获取方法,我使用过以下三种方式获取数据库数据源: 创建 存储对应数据库所有字段的 结构体,将结构体置于容器中返回,然后根据索引值(QModelIndex) ...
- BPM配置故事之案例7-公式计算
行政主管发来邮件.要求物资明细表增加"单价""总价"."单价"由其审批时填写,"总价"根据"单价"与 ...
- iOS开发 判断当前APP版本和升级
从iOS8系统开始,用户可以在设置里面设置在WiFi环境下,自动更新安装的App.此功能大大方便了用户,但是一些用户没有开启此项功能,因此还是需要在程序里面提示用户的 方法一:在服务器接口约定对应的数 ...
- HTML5游戏源码 飞翔的字母 可自定义内容
相信大家都玩过飞翔的小鸟吧,当然,可能已经有很多人因为这个游戏砸了不少手机.吼吼. 废话不多说,回到主题,源码如下. 博客园上传空间大小有限制,没法上传了,需要打包源码的朋友们请留言邮箱地址.当然还有 ...
- 在配有英特尔® Iris™ 显卡的系统上通过优化对 Just Cause 3 进行增强
高端 PC 继续通过高性能显卡驱动桌面游戏. 一流的"梦想机器"基于第六代智能 英特尔® 酷睿™ 处理器i7-6700K等 CPU,通常与高端独立显卡配合使用以运行要求最严苛的游戏 ...
- 关于sqlmap的使用
好记性不如烂笔头,记录一下. 带cookie的注入 python sqlmap.py -u "http://www.xxx.com?id=1" --cookie="coo ...