animation-play-state属性(CSS设置暂停动画)
animation-play-state属性
1.类名active与动画触发
首要,运用active触发每一屏的动画,简直已经约定俗成,应该也主张成为默许的行业标准。
一般做法是,当对应一屏内容进入的时分,运用JS给容器增加类名active:
container.classList.add("active");
假如你做的动画逼格较高,希望每次阅读这一屏内容的时分,动画都走一遍,能够运用reflow从头触发一下animation:
container.classList.remove("active");
container.offsetWidth=container.offsetWidth;
container.classList.add("active");
2.类名active与动画操控技巧
怎样详细操控动画的播放呢?咱们通常榜首反应是运用下面的办法完成,动画的完好CSS代码在active状况下呈现,如:
.element1{/*尺度与定位*/}.element2{/*尺度与定位*/}.element3{/*尺度与定位*/}....active.element1{animate:name11s;}.active.element2{animate:name21s;}.active.element3{animate:name21s;}...
从完成和功用上将,上面办法是很不错的,通俗易懂,不易犯错。不过我个人更喜爱运用合作CSS3的animation-play-state特点对每屏动画进行操控,完成如下:
动画相关CSS代码直接写在元素上:
.element1{/*尺度与定位*/animate:name11s;}.element2{/*尺度与定位*/animate:name21s;}.element3{/*尺度与定位*/animate:name31s;}...
创立一个类名,如.animate,凡是运用到了animation动画的元素都增加这个类名;如下CSS代码:
.animate{animation-play-state:paused;
}.active.animate{animation-play-state:running;
}
之所以个人更喜爱后面的办法,是因为有一种“无侵入”的感觉,代码层次清晰,操控关系清晰。有利于后期的保护与扩展。
可是,运用animation-play-state仍是有些需求留意的,关于IE10/IE11阅读器,animation-play-state是不能简写的。如:
.element{animate:shake4s2sbothinfinitepaused;}
只会让整个CSS声明挂掉的!如下写法支撑:
.element{animate:shake4s2sbothinfinite;animation-play-state:paused;
}
有人或许要奇怪了,怎样突然IE阅读器乱入了?首要,咱们不能无视干流手机之WindowsPhone.其次,帅气的翻屏动画并不是移动端专有,桌面端也适用。稍稍用力,桌面移动全适配,何乐而不为!
不同状况下的接连动画
有时分,动画或许不是一波流,分状况。
例如,咱们的小火箭,先是淡出动画,然后无限上下悬浮。怎样完成呢?
关键点便是动画分解与延时。
据我所知,没办法只运用一个keyframes关键帧声明就完成这个作用,因为,这儿有动画状况的改变:一个只履行一次的动画和一个无限循环动画。
怎样办?咱们能够将动画分解,写2个animationkeyframes动画关键帧描绘。
@keyframesfadeIn{/*...*/}@keyframesfloat{/*...*/}
然后,再分别运用这些关键帧动画。怎样运用呢?有2个小技巧:
1.逗号与多animation动画值
如下:
divclass="element">小火箭
.element{animation:fadeIn1s,float.5s1sinfinite;}/*我淡出,需求1秒;我1秒后开端无限漂浮*/
其间float.5s1sinfinite这儿的1s便是无限漂浮动画履行延迟的时刻,所以,两个动画完美合作,感觉就像是一个动画。实际上,便是一个动画,所有CSS3animation动画走同一个UI线程,这也是为何引荐运用CSS完成动画作用的原因。
此写法没有兼容性问题,大家能够开开心心肠运用。
2.标签嵌套与独立动画
咱们还能够经过嵌套标签的方法完成接连动画,例如:
class="element-wrap"><divclass="element">小火箭div>div>.element-wrap{animation:fadeIn1s;}/*我淡出,需求1秒*/.element{animation:float.5s1sinfinite;}/*我1秒后开端无限漂浮*/
有人或许会奇怪了。animation本身就支撑多动画并行,你还搞个标签嵌套,没有任何运用的理由啊!没错,单纯看咱们这个例子,的确是这样。可是:
①提取共用动画
这类多屏动画是有N多元素一起履行不同的动画。比方说,火箭是淡出,然后上下漂浮;火箭的火焰是淡出,然后巨细改变;黑洞是淡出,然后左右随波。你怎样完成?
假如朴实凭借animation语法,应该是:
.element1{animation:fadeIn1s,float.5s1sinfinite;}/*我淡出,需求1秒;我1秒后开端无限漂浮*/.element2{animation:fadeIn1s,size.5s1sinfinite;}/*我淡出,需求1秒;我1秒后开端巨细改变*/.element3{animation:fadeIn1s,move.5s1sinfinite;}/*我淡出,需求1秒;我1秒后开端左右移动*/
能够看到,淡出是共用的动画作用,咱们能够凭借嵌套标签,完成共用语法的兼并,方面后期保护:
.element-wrap{animation:fadeIn1s;}/*大家都1秒淡出*/.element1{animation:float.5s1sinfinite;}/*我1秒后无限漂浮*/.element2{animation:size.5s1sinfinite;}/*我1秒后忽大忽小*/.element3{animation:move.5s1sinfinite;}/*我1秒后左右移动*/
②避免改换抵触
有个元素动画是边360度旋转、边扩大(从0扩大到100%),像这种具有典型特征的动画咱们明显要独立提取与共用的:
@keyframesspin{/*transform:rotate...*/}@keyframeszoomIn{/*transform:scale...*/}
好了,现在问题来了,边扩大边旋转:
.element{animation:spin1s,zoomIn1s;}/*旋转:啊,完蛋啦,我被扩大掩盖啦!*/
由于都是运用transform,产生了残暴的掩盖。当然,有好事的人会说,你运用zoom不就好了!的确,假如只是移动端,运用zoom的确棒棒哒!可是,咱们这个企业活动,PC是主战场,因此,FireFox阅读器(FF不识zoom)是不能无视的。
怎样办?从头建一个名为spinZoomIn的动画关键帧描绘仍是?
对啊,你直接外面套一层标签不就万事大吉了
.element-wrap{animation:spin1s;}/*我转转转*/.element{animation:zoomIn1s;}/*我大大大*/
无侵入定位和居中定位原则
1.这儿的“无侵入定位”指不受animation影响的元素定位,包括两部分:一是不运用keyframes关键帧决议初始位置;二是不要运用keyframes中呈现的特点定位。
①.不运用keyframes决议初始位置
应该都知道,CSS3animation的fill-mode能够决议元素动画完毕前后的位置,也便是也具有定位的作用。此刻,或许就会有小伙伴,故作聪明,运用animationkeyframes0%{}或form{}去做定位,貌似,还省了写代码。看上去很赞,实际上狭窄了,这关于对animation支撑不佳或不支撑的阅读器实际上是不友好的,例如Android2.3不支撑animation-fill-mode,IE6-IE9不支撑CSS3animation,所以乎,当遭遇这些阅读器的时分,页面动画元素的布局实际上是毁掉的。所以,这些动画元素定位的时分,需求运用“无侵入定位”,也便是,就算页面没有animation,我也是个“美丽人儿”。
②.不运用keyframes中呈现的特点定位
举个例子,有个球,正好定位在模块的中心,一起有个无限旋转作用。运用transform:translate(-50%,-50%)居中定位再合适不过了,不用我心里难过,所以,运用了transform定位。此刻,抵触产生,旋转动画也是需求transform改换的。
@keyframesspin{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}
要么运用业界约定俗成spin掩盖,要么重整旗鼓没法重用:
@keyframesspin-trans{0%{transform:rotate(0)translate(-50%,-50%);}100%{transform:rotate(360deg)translate(-50%,-50%);}}
明显,都是不合适的。主张运用传统left/top/margin进行定位,与transform改换动画“无侵入”。
2.这儿的“居中定位原则”包括两部分:一是元素定位在容器中心位置;二是元素的定位方法为居中定位。
①.元素定位在容器中心
容器以及容器内的动画元素能够看成是一个动画模块,为了这个模块能够轻松驾御水平布局和垂直局部,里边的动画元素形成的整体必定要在容器的中心,不要被设计稿或周围环境影响。
②.定位方法为居中定位
所谓“居中定位”是相对“传统定位”而言的。Web页面中的模块、文字什么的默许都是相关于左上角堆砌的,所以,很自然地,咱们在重构页面,做布局,写交互作用的时分,也都是相对左上角定位。活用元素本身的定位特性,这是很赞的也引荐这么做!可是,假如你和多元素CSS动画打交道,或许就需求改变下惯性思维了,很重要的一点便是“从以左上角为参考点变成以中心点为参考点”。
咱们在完成多元素动画作用时分,会呈现两类人物:一是容器;二是容器里边许多动画元素。
其间,关于容器元素,特别在做移动端产品时分,咱们很自然会让其居中定位:
.container{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);
}
左上角定位(或右上角定位):
.example{position:absolute;left:100px;top:100px;
}
中心点定位+margin偏移:
.example{position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;
}
在实现音乐播映页面时需要让一个圆进行旋转,当音乐暂停时期望圆也中止转动停留在当时时间,当音乐播映时动画会继续进行,这儿需要用到CSS3的一个新特点animation-play-state,它有两个值:
{
animation-play-state:paused;//暂停动画
animation-play-state:running;继续播映动画
}
注意:在增加上面这个特点的时分,也要增加动画特点,才能收效
示例:
//界说了动画类和暂停类
.animationStyle{
animation:my-rotate5slinearinfinite;
}
.pause{
animation-play-state:paused;
}
@keyframesmy-rotate{
0%{transform:rotate(0)}
25%{transform:rotate(90deg)}
50%{transform:rotate(180deg)}
75%{transform:rotate(270deg)}
100%{transform:rotate(360deg)}
}
//在进行动画播映和暂停时,需要重新设置类名实现
methods:{
play(){
letaudio=document.querySelector("#audio");
letalbumImg=document.querySelector("#albumImg");
audio.play();
this.animationStyle="animationStyle";
this.getCurrentTime();
},
stop(){
letaudio=document.querySelector("#audio");
letalbumImg=document.querySelector("#albumImg");
audio.pause();
//增加pause类的一起,animationStyle也不能少
this.animationStyle="pauseanimationStyle";
优秀作品:
最新作品:
评论列表(共270人参与)参与讨论或分享设计作品获得视觉癖积分奖励
士节是每年注册会员
2021-06-04 9:16:10
> 是,劳动的欢笑。春天策划,我所导演的,是劳动节的祝愿,祝你轻松高兴,五一高兴!
回复CK是黑注册会员
2021-06-04 3:30:42
片 防溺水手游客
2021-06-04 20:59:40
游客51268:animation-play-iv> ●animation-iteration-count:规则动画应该播映的次数。 ●animation-direction:规则是否应该轮那几句中文。 17、每天都看着不同口味的安眠药在讲台上走来走去。 18、肉长出来还能够减,但
回复,让你的注册会员
2021-06-04 6:25:5
/div> 假如你做的动画逼格较高,希望每次阅读这一屏内容的时分,动画都走一遍 简介:在线海报制作平台,界面简洁清新,提供多种模板修改制作,设计感较强,部分模板需要付费才能使用。 7.素彩
回复