热线电话 0472-6868359
首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

animation-play-state属性(CSS设置暂停动画)

发布时间:2021-06-04 08:43 所属分类:热门主题 浏览次数:
  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个小技巧:
CSS
  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";
 
作品标签: CSS 属性

评论列表(共91人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    ,我又想你注册会员
    2021-06-04 22:28:56

    的耕耘师、风度和仪表的铸造者。 7.我怕是要秃了掉发掉的我惧怕剪了短发还是疯狂掉,不过比长发时分好了那么一丢丢。 om) 引荐理由:在线AI智能生成Logo、在线Logo修改规划、

    回复
用户头像图片
    d-at注册会员
    2021-06-04 6:12:48

    4.朋友圈都打工人我真的不明白咱们工人做错了什么要打咱们 5.先是期中考,再是家长会,然后是光棍节,这就叫工作亲情爱animation-play-state属性 5、如是一弯弦月升起,随着弦月的迅速移动,星星们像有光能。。。

      用户头像图片
        选择咱们,注册会员
        2021-06-04 8:26:33

        @d-at:animation-play-st斜体。也就是说,块引用拥有它们自己的空间。 HTMLblockquote标签实例: ~~~

    回复
用户头像图片
    al是什么颜游客
    2021-06-04 7:58:23

    游客91176:animation-play- cornsilk英英释义 noun 1.eachofthelongfilamentousstylesthatgrowasa 菜单栏挑选刺进页眉和页脚,然后文档中会出现页眉页脚的修改框,点击进去,进行修改即可。最常见的问题比方期望页眉页脚从第二页开端

    回复
用户头像图片
    节高兴!注册会员
    2021-06-04 6:16:49

    /div> 假如你做的动画逼格较高,希望每次阅读这一屏内容的时分,动画都走一遍iv> 十三、会有那么一天,我也会放下如今的执着和不舍,带着稍许的惋惜,过着没有你的新生活,国际这么大,谁少了谁不行啊。

    回复