ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > 应用开发 > Javascript > 四个基本的JavaScript函数来驯服CSS3过渡和动画

四个基本的JavaScript函数来驯服CSS3过渡和动画

原创 Javascript 作者：cenfeng 时间：2019-07-08 15:20:35 0 删除 编辑

CSS3过渡使CSS属性更改之间的动画变得容易。 它简单的CSS语法使每个人都可以访问它，但同时限制它自己创建复杂的，事件驱动的动画。 在本教程中，我们将介绍4个基本的JavaScript例程，帮助您充分发挥CSS Transitions和Animations的潜力。

1） classList 用于添加和删除CSS类的API

该 classList API提供了原生的方式来添加，删除，切换，或检查CSS类存在的元素。 它比解析容易得多 element.className ：

1
2
3
4
5
6
7
8
9
10
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >element.classList.add（“someclass”） //向元素添加一个类</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
element.classList.add（“class1”，“class2”等） //添加多个CSS类。</font><font style="vertical-align: inherit;">IE11或FF26或更低版本不支持。</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
element.classList.remove（“someclass”） //从元素中删除一个类</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
element.classList.remove（“class1”，“class2”等） //删除多个CSS类。</font><font style="vertical-align: inherit;">IE11或FF26或更低版本不支持。</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
element.classList.toggle（“someclass”） //切换一个类。</font><font style="vertical-align: inherit;">如果已经存在则删除并返回false。</font><font style="vertical-align: inherit;">否则添加class并返回true</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
element.classList.toggle（“someclass”，expression） //根据表达式的结果添加或删除“someclass”。</font><font style="vertical-align: inherit;">IE11或FF26或更低版本不支持。</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
element.classList.contains（“someclass”） //检查元素中是否存在类</font></font>

基本的支持 classList   是非常好的 ，如果你还需要迎合旧的IE浏览器，那么这是  一个很好的pollyfill 。

使用 classList  API，我们可以存储CSS转换以在CSS类中播放，并通过向元素添加或删除它们来按需播放和反转它们。 这几乎是神奇的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" ><style type =“text / css”></font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
＃一个盒子{</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     宽度：250px;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     身高：100px;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     背景：海军;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     margin-bottom：1em;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     -webkit-transform：scale（0.5）;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     变换：规模（0.5）;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     不透明度：0;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     -webkit-transition：全部.5s;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     过渡：全部.5s;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
＃abox.openbox {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     -webkit-transform：scale（1）;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     变换：规模（1）;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
     不透明度：1;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
</样式></font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
<div id =“abox”> </ div></font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
<button onClick =“document.getElementById（ 'abox' ）。classList.toggle（ 'openbox' ）”>显示/隐藏</ button></font></font>

添加和删除CSS类可以轻松地按需应用CSS转换，并为 transform CSS中定义的 选择属性（如“  ”） 提供所有复杂的供应商前缀 。


来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69933200/viewspace-2649842/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： JavaScript ES6值得掌握的五大功能（5）默认和休息参数
下一篇： 四个基本的JavaScript函数来驯服CSS3过渡和动画（2）动态设置CSS3属性的值
请登录后发表评论 登录
全部评论
cenfeng

注册时间：2019-06-18

  • 博文量
    125
  • 访问量
    129490

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593