热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

有关css3动画描述有误,CSS3动画错误锦集

这是笔者整理的个人在CSS3动画上遇到的问题,全部都是笔者个人的经验,以及解决方案,并不相信网上会有重复的文章。大家可以点进每个小栏目的c

这是笔者整理的个人在CSS3动画上遇到的问题,全部都是笔者个人的经验,以及解决方案,并不相信网上会有重复的文章。大家可以点进每个小栏目的codeplay去地直观feel一下。

常见错误:Animation篇

首先先来复习一下animation的有哪些属性:

属性名

默认

作用

animation-name

none

keyframe 的名字

animation-duration

0s

运行总时长

animation-timing-function

ease

运行的速度变化,总不可能总是匀速吧

animation-delay

0s

延迟时间

animation-iteration-count

1

重复的次数,也可以是无限的infinite

animation-direction

normal

动画执行方向,可以正着来,也可以反着来reverse

animation-fill-mode

none

important 动画结束之后和开始之前的状态,是不是动画未开始的时候就是默认样式,结束的时候又返回默认样式。

animation-play-state

running

动画的状态,注意如果说这个时候动画运行结束了,状态也是running,因为这个running不是表示动画正在运行,而是一种状态,有没有被强行暂停。

常见错误一:动画做完就disappear了!喂喂喂!没让你消失啊。code play~

这个应该是animation中的基础题,所以放在了第一位。这个问题的解决方案就是 animation-fill-mode 这个属性没有设置或者设置错误。这个属性从专业的角度来说是动画的一个延续,就是0~100%的keyframe走完之后和开始之前的归宿。简单地来说就是动画结束之后或者开始之前,当前元素的状态是否保留动画最后一帧的状态或者未开始之前使用第一帧的样式。这个属性默认是不保留状态,也就是说开始之前是原始状态,开始之后才开始转换样式,结束之后会立刻切换至原始状态,仿佛这个动画不曾存在过。这里的 forwards 是指动画结束之后(无论是正着来还是倒这来)的状态, backwards 是指动画delay的时候的状态。both就很简单了,包含了结束之后和开始之前的状态。当然大家更喜欢 both ,这样就不用考虑之前或者之后的问题了。

常见错误二:怎么停不下来,想控制动画的动态。code play~

这里我们可以借用 animation-play-state 来控制动画的是否继续。划重点,这边的是否继续并不包含重新开始。

那么,我可不可以通过控制 animation-direction 的值来控制动画的重新开始呢?比如我一个动画reverse一下之后又重新开始了。emmm,想法很好,但是现实很残酷。animation的time很智能,比如我在动画的途中改变了动画,然后animation会根据当前时间的反方向的状态获取状态,然后从哪个点开始执行,也就是说在动画途中改变direction,最终动画还是按照原来的时间执行,也就是除非取消动画,否则动画的时间是固定的(当然会有一些小误差)。所以想利用direction来让动画动起来就是太天真了。

既然如此,我可不可以来回动呢,比如一个element,我希望他可以从左到右再从右到左。这个时候 animation-direction 可以设置为 alternate ,这样就会控制奇偶次数的不同动画范围,but!动画次数要>1,不然哪里来的奇偶呀~

这里有一篇CSS triks上详细讲解如何重新开始动画的博客, Restart CSS Animation

常见错误:Transition篇

复习一下transition的各个属性值。

transition属性

默认值

作用

transition-delay

0

延迟

transition-duration

0

变换速度

transition-property

all

变化属性,默认监控全部变化,如果只需要某一个值比如transform,就只监听transform即可。

transition-timing-function

ease

时间函数

只有我一个人觉得Transition是一个大坑吗,感觉比animation更难以驾驭。

常见错误三:是我眼花了吗,怎么直接结束了,仿佛不曾存在过。play code

有一种情况,我在页面首次渲染地时候就对transform进行了修改,想着只要改变tranform,transition就会工作。但是这个transition地工作性质是对比当前渲染状态和上一次渲染状态的的差别。因此像这个样子改变,在首次渲染之前就改变了transform,transition失去了对比的参照物,然后就不动了,解决这个问题可以用requestAnimationFrame解决,这个方法就是用于渲染前的最后一步也就是paint之前的一步,然后修改了layout,最后transition感受到了召唤,识别出了差别,就正常工作了起来。

FailTransition.style.transform="translateX(100px)"

requestAnimationFrame(()=>{

SuccessTransition.style.transform="translateX(100px)"

})

步骤大概是这样的:

Recalculate Style>Layout>requestAnimationFrame>Recalculate Style>Layout>Update Layer Tree>Paint>Composite Layers

还有一种情况,就是我们希望这个元素可以先向右再向左,根据上次的经验我们可以这么写,但是失效了,为什么呢?因为点击之后设置的样式,还没抵达paint就被requestAnimationFrame重写了,然后就按照最后一次的样式和上一次渲染的样式做了对比,进行了变换。

change.addEventListener("click",()=>{

ChangeFrequency.style.transform="translateX(10000px)"

requestAnimationFrame(()=>{

ChangeFrequency.style.transform="translateX(50px)"

})

})

为了解决这个问题我们可以双重requestAnimationFrame。然而可以看到生效了,但是transition会自动修复,1s内完成的动画,绝不会超时,因此我们的动画悲剧没有按照我们设定的那样向右移动1s之后再向左执行1s,而是总时间1s,所以会闪现结束。

change.addEventListener("click",()=>{

ChangeFrequency.style.transform="translateX(10000px)"

requestAnimationFrame(()=>{

requestAnimationFrame(()=>{

ChangeFrequency.style.transform="translateX(50px)"

})

})

})

至于如何实现串联动画,我的第一选择是animation,第二选择是监听transitionend事件,当地一个动画结束后再执行之后的动画。

function moveBack(){

ChangeFrequencyFix.style.transform="translateX(50px)"

ChangeFrequencyFix.removeEventListener("transitionend",moveBack)

}

ChangeFrequencyFix.addEventListener("transitionend",moveBack)

常见错误四:怎么回事!怎么从奇怪的地方出现了!这是一个小bug。code play

理想是从左上到右下,然后放大,动画结束后,重新从原点出发,从上放大滑动到下方,然后却直接从右下平行滑动到了最后的位置,这个小bug可以说是作死。因为transition的特性是保留上一次动画的最后一帧,然后过渡到新的状态,如果不想要某一个状态的重置,记得关闭transition,否则就会出现连续的动画。

function goTrravel(){

correctToGo.removeEventListener("transitionend",goTrravel)

correctToGo.style.transition="none"

correctToGo.classList.remove("active")

requestAnimationFrame(()=>{

requestAnimationFrame(()=>{

correctToGo.classList.add("pop")

correctToGo.style.transition="transform 2s,opacity 2s"

})

})

}

correctToGo.addEventListener("transitionend",goTrravel)

因为transition是实时监控的,所以如果如果去除了transform的状态,他会回到default的状态。因此,如果想要抛弃回到初始化或者某一状态需要重置transition。

常见错误五:喂喂喂,你怎么还在这个层下面,我都给你z-index:1000了,你快出来啊。动画提升层code play

一般情况下如果想要层级高,就用z-index设置就可以了。甚至父节点A的层级低于父节点B的层级,但是,再没有提升层的情况下,同一层中父节点A的子节点可以高于父节点B的层级。但是若是产生了提升层,除非整个父节点A高于父节点B,父节点A中的子节点才可以高于父节点B的层级。

下图就是一个例子,大家可以看见下面这个产生提升层的情况,里面的黄色子节点是无法突破红色节点的,因为他们已经处于不同的层了。z-index只作用于当前层,没有跨层处理的能力。

5fc7cfb6924cdf7b71e6b05d092dc66f.png

常见错误六:will-change和translateZ(0)作用是一样的。

这一块,我们都知道如果想要加速GPU渲染就使用类似于hack的translateZ(0)或者是CSS新属性will-change,那么这两者的原理是什么,具体的使用情况是什么?

其实他们就是一个提升层的概念,将之后可能会改变的元素从当前的层中抽离,阻止composition,这样这部分修改的时候就不会影响整个页面的布局,从而阻止了reflow。

那么translateZ(0)的作用是否和will-change一样呢?不!

虽然他们都是提升层,但是will-change带有缓存作用,也就是说change的内容会被缓存,只有第一动画回paint之后的重复动画就不会再绘制,但是translateZ(0)每次动画都会重新绘制。可以说will-change对于重复动画很有好了。但是!不要滥用哦~will-change会缓存,因此很占内存。大家慎用。

参考链接:

youtu.be/cCOL7MC4Pl0 , JS conf上面讲evenloop的视频,里面的evenloop和渲染的关系对笔者的启发很大。

www.w3.org/TR/2016/WD-… , 如果想要深入研究layer这一块,可以参考CSS的规范,可以又更深入的感受。不过CSS的规范是给大家深入学习CSS的,并不是教大家如何使用的。

注:

原创声明!全部都是笔者一个字一个字敲出来,代码是笔者一个个code出来的。

欢迎转载,注明出处。



推荐阅读
  • 本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ... [详细]
  • 尽管在WPF中工作了一段时间,但在菜单控件的样式设置上遇到了一些基础问题,特别是关于如何正确配置前景色和背景色。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文详细探讨了Java中HashMap类的hash()方法的工作原理及其重要性,特别是在JDK 7版本中的实现。 ... [详细]
  • 视觉Transformer综述
    本文综述了视觉Transformer在计算机视觉领域的应用,从原始Transformer出发,详细介绍了其在图像分类、目标检测和图像分割等任务中的最新进展。文章不仅涵盖了基础的Transformer架构,还深入探讨了各类增强版Transformer模型的设计思路和技术细节。 ... [详细]
  • 本文详细介绍了如何在 Ubuntu 14.04 系统上搭建仅使用 CPU 的 Caffe 深度学习框架,包括环境准备、依赖安装及编译过程。 ... [详细]
  • 本文探讨了Python类型注解使用率低下的原因,主要归结于历史背景和投资回报率(ROI)的考量。文章不仅分析了类型注解的实际效用,还回顾了Python类型注解的发展历程。 ... [详细]
  • Zabbix自定义监控与邮件告警配置实践
    本文详细介绍了如何在Zabbix中添加自定义监控项目,配置邮件告警功能,并解决测试告警时遇到的邮件不发送问题。 ... [详细]
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • Maven + Spring + MyBatis + MySQL 环境搭建与实例解析
    本文详细介绍如何使用MySQL数据库进行环境搭建,包括创建数据库表并插入示例数据。随后,逐步指导如何配置Maven项目,整合Spring框架与MyBatis,实现高效的数据访问。 ... [详细]
  • 长期从事ABAP开发工作的专业人士,在面对行业新趋势时,往往需要重新审视自己的发展方向。本文探讨了几位资深专家对ABAP未来走向的看法,以及开发者应如何调整技能以适应新的技术环境。 ... [详细]
  • 本文详细介绍了 `org.apache.tinkerpop.gremlin.structure.VertexProperty` 类中的 `key()` 方法,并提供了多个实际应用的代码示例。通过这些示例,读者可以更好地理解该方法在图数据库操作中的具体用途。 ... [详细]
  • 本文详细介绍了Linux系统中信号量的相关函数,包括sem_init、sem_wait、sem_post和sem_destroy,解释了它们的功能和使用方法,并提供了示例代码。 ... [详细]
  • 利用 Calcurse 在 Linux 终端高效管理日程与任务
    对于喜爱使用 Linux 终端进行日常操作的系统管理员来说,Calcurse 提供了一种强大的方式来管理日程安排、待办事项及会议。本文将详细介绍如何在 Linux 上安装和使用 Calcurse,帮助用户更有效地组织工作。 ... [详细]
author-avatar
maniac0207
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有