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的释义为 ...
随机推荐
- Linq中比较字符串类型的日期
一.在使用Linq时,想要比较字符串类型的日期时,参考以下: SQL语句: )select * from TableName where StartTime > '2015-04-08' )se ...
- 423. Reconstruct Original Digits from English(Medium)
Given a non-empty string containing an out-of-order English representation of digits 0-9, output the ...
- LINUX操作系统（centos6.9）安装与配置
LINUX操作系统(centos6.9)安装与配置_百度经验 https://jingyan.baidu.com/article/acf728fd6bdba1f8e510a3f7.html cento ...
- js 正则进阶regexp
一.匹配中文,英文字母和数字及_: const reg = /^[\u4e00-\u9fa5\w]+$/; const str1 = 'shangyy'; const str2 = '尚悦悦ww123 ...
- Laravel自带SMTP邮件组件实现发送邮件（QQ、163、企业邮箱都可）
Laravel自带SMTP邮件组件实现发送邮件(QQ.163.企业邮箱都可) laravel自带SMTP邮件配置和遇到的坑 laravel自带SwiftMailer库,集成了多种邮件API,可 ...
- hdu2089_不要62
不要62 题目大意:给你一个区间,算出该区间里不含62或4的数的个数 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 /* // 暴力就可以过了 ...
- mybatis源码分析（二）------------配置文件的解析
这篇文章中,我们将讲解配置文件中 properties,typeAliases,settings和environments这些节点的解析过程. 一 properties的解析 private void ...
- 去掉dede织梦position当前位置最后一个箭头的方法
理论是,dede的当前位置标签{dedefield name='position'}结构是 首页 > 主栏目 > 子栏目 > ,这就说明,而箭头符号字段数据都是在后台设置后存储在数据 ...
- vue-cli: preset预设
preset:预设 vue create demo01 过程中,会保存预设,自动保存着 .vuerc 文件中 .vuerc 文件的位置:C:\Users\Administrator C:\Users\ ...
- js对日期的判断
在初始页面获取倒当前时间并向前推N天后作为起始时间 function date(){ var myDate = new Date(); //获取当前时间 ...