Js点击触发Css3的动画Animations、过渡Transitions效果
关键是首先指定动画效果的CSS属性名称，然后在Js中改变这个属性
如果不使用Js触发，可以选择利用css的状态：hover，focus，active 来触发，也可以一开始就触发
下例为Js点击触发过渡Transitions效果，指定的属性名称是width
<!DOCTYPE html>
<html>
<head>
<style>
#aaa {
width: 100px;
height: 100px;
background: blue;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
</style>
<script>
function big() {
document.getElementById("aaa").style.width = "300px";
}
function small() {
document.getElementById("aaa").style.width = "100px";
}
</script>
</head>
<body>
<button onclick="big()">Big</button>
<button onclick="small()">Small</button>
<div id="aaa"></div>
</body>
</html>
原创文章，欢迎转载，转载请注明出处！
Js点击触发Css3的动画Animations、过渡Transitions效果的更多相关文章
- css3关键帧动画实现轮播效果
实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...
- 使用css动画实现领积分效果
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
- js代码点击触发事件
js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...
- js和jquery触发按钮点击事件
js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- 深入A标签点击触发事件而不跳转的详解
本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...
- CSS3 动画及过渡详解
今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...
- CSS3中和动画有关的属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform. transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为 ...
随机推荐
- adb命令集合
1. 获取序列号: adb get-serialno 2. 查看连接计算机的设备: adb devices 3. 重启机器: adb reboot 4. 重启到bootloader,即刷机模式: ad ...
- C#跨进程读取listview控件中的数据
http://www.cnblogs.com/Charltsing/p/slv32.html 欢迎交流:QQ564955427 读取标准的32位listview控件中的数据,网上已经有很多代码了.今天 ...
- InvalidDataAccessResourceUsageException：mysql保留字引发的血案
org.springframework.dao.InvalidDataAccessResourceUsageException: could NOT EXECUTE statement; SQL [n ...
- 聊一聊跨域，Vue向Django请求数据的一些问题
1.做前后端分离 前端使用Vue程序,后端使用Django配合rest-framework. 那么前端Vue通过API接口拿到数据会出现跨域的问题,JSONP只是在get中会用到的,所以这里使用cor ...
- python selenium中如何测试360等基于chrome内核的浏览器
转自:https://blog.csdn.net/five3/article/details/50013159 直接上代码,注意是基于chrome内核的浏览器,基于ie的请替换其中的chrome方法为 ...
- Java 获取当前日期的四种方法
//1 通过Date类来获取当前时间,通过SimpleDateFormat来设置时间格式 SimpleDateFormat dateFormat = new SimpleDateFormat(&quo ...
- java 工厂模式 转载
下面介绍三种设计模式,简单工厂模式,工厂方法模式,抽象工厂模式 思考如下场景: 有一天,林同学准备去买笔记本,他到商城发现有两款电脑他特别喜欢, 一款是 Macbook Pro, 另一款是 Surfa ...
- CLOUD SQL跟踪
CLOUD会自动在后台执行一些sql语句,所以追踪起来比较麻烦,需要加入一些过滤条件. 比如关键的CLIENTPROCESSID,加入后 ,就能过滤是哪个客户度执行的数据. 过滤数据.
- windows环境下protobuf的java操作{编译，序列化，反序列化}
google protocol buffer的使用和原理 概况: Protocol Buffers(也就是protobuf)是谷歌的语言中立的.平台中立的.可扩展的用于序列化结构化的数据: windo ...
- java的强制类型转换
java强制类型转换 详细连接https://www.cnblogs.com/kuangwong/p/6198862.html 在Java项目的实际开发和应用中,常常需要用到将对象转为String这 ...