热门标签 | 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出来的。

欢迎转载,注明出处。



推荐阅读
  • 本指南从零开始介绍Scala编程语言的基础知识,重点讲解了Scala解释器REPL(读取-求值-打印-循环)的使用方法。REPL是Scala开发中的重要工具,能够帮助初学者快速理解和实践Scala的基本语法和特性。通过详细的示例和练习,读者将能够熟练掌握Scala的基础概念和编程技巧。 ... [详细]
  • 本文深入解析了JDK 8中HashMap的源代码,重点探讨了put方法的工作机制及其内部参数的设定原理。HashMap允许键和值为null,但键为null的情况只能出现一次,因为null键在内部通过索引0进行存储。文章详细分析了capacity(容量)、size(大小)、loadFactor(加载因子)以及红黑树转换阈值的设定原则,帮助读者更好地理解HashMap的高效实现和性能优化策略。 ... [详细]
  • 本文详细介绍了在 CentOS 7 系统中配置 fstab 文件以实现开机自动挂载 NFS 共享目录的方法,并解决了常见的配置失败问题。 ... [详细]
  • 利用python爬取豆瓣电影Top250的相关信息,包括电影详情链接,图片链接,影片中文名,影片外国名,评分,评价数,概况,导演,主演,年份,地区,类别这12项内容,然后将爬取的信息写入Exce ... [详细]
  • 本文介绍如何使用 Python 的 DOM 和 SAX 方法解析 XML 文件,并通过示例展示了如何动态创建数据库表和处理大量数据的实时插入。 ... [详细]
  • 大类|电阻器_使用Requests、Etree、BeautifulSoup、Pandas和Path库进行数据抓取与处理 | 将指定区域内容保存为HTML和Excel格式
    大类|电阻器_使用Requests、Etree、BeautifulSoup、Pandas和Path库进行数据抓取与处理 | 将指定区域内容保存为HTML和Excel格式 ... [详细]
  • 属性类 `Properties` 是 `Hashtable` 类的子类,用于存储键值对形式的数据。该类在 Java 中广泛应用于配置文件的读取与写入,支持字符串类型的键和值。通过 `Properties` 类,开发者可以方便地进行配置信息的管理,确保应用程序的灵活性和可维护性。此外,`Properties` 类还提供了加载和保存属性文件的方法,使其在实际开发中具有较高的实用价值。 ... [详细]
  • 在配置Nginx的SSL证书后,虽然HTTPS访问能够正常工作,但HTTP请求却会遇到400错误。本文详细解析了这一问题,并提供了Nginx配置的具体示例。此外,还深入探讨了DNS服务器证书、SSL证书的申请与安装流程,以及域名注册、查询方法和CDN加速技术的应用,帮助读者全面了解相关技术细节。 ... [详细]
  • 使用 ListView 浏览安卓系统中的回收站文件 ... [详细]
  • 优化后的标题:深入探讨网关安全:将微服务升级为OAuth2资源服务器的最佳实践
    本文深入探讨了如何将微服务升级为OAuth2资源服务器,以订单服务为例,详细介绍了在POM文件中添加 `spring-cloud-starter-oauth2` 依赖,并配置Spring Security以实现对微服务的保护。通过这一过程,不仅增强了系统的安全性,还提高了资源访问的可控性和灵活性。文章还讨论了最佳实践,包括如何配置OAuth2客户端和资源服务器,以及如何处理常见的安全问题和错误。 ... [详细]
  • 在Ubuntu上安装MySQL时解决缺少libaio.so.1错误及libaio在MySQL中的重要性分析
    在Ubuntu系统上安装MySQL时,遇到了缺少libaio.so.1的错误。本文详细介绍了如何解决这一问题,并深入探讨了libaio库在MySQL性能优化中的重要作用。对于初学者而言,理解这些依赖关系和配置步骤是成功安装和运行MySQL的关键。通过本文的指导,读者可以顺利解决相关问题,并更好地掌握MySQL在Linux环境下的部署与管理。 ... [详细]
  • 数据库多表联合查询:内连接与外连接详解
    在数据库的多表查询中,内连接和外连接是两种常用的技术手段。内连接用于检索多个表中相互匹配的记录,即只有当两个表中的记录满足特定的连接条件时,这些记录才会被包含在查询结果中。相比之下,外连接则不仅返回匹配的记录,还可以选择性地返回不匹配的记录,具体取决于左外连接、右外连接或全外连接的选择。本文将详细解析这两种连接方式的使用场景及其语法结构,帮助读者更好地理解和应用多表查询技术。 ... [详细]
  • 本文介绍了如何在iOS平台上使用GLSL着色器将YV12格式的视频帧数据转换为RGB格式,并展示了转换后的图像效果。通过详细的技术实现步骤和代码示例,读者可以轻松掌握这一过程,适用于需要进行视频处理的应用开发。 ... [详细]
  • 本文介绍如何通过 Python 的 `unittest` 和 `functools` 模块封装一个依赖方法,用于管理测试用例之间的依赖关系。该方法能够确保在某个测试用例失败时,依赖于它的其他测试用例将被跳过。 ... [详细]
  • Android中将独立SO库封装进JAR包并实现SO库的加载与调用
    在Android开发中,将独立的SO库封装进JAR包并实现其加载与调用是一个常见的需求。本文详细介绍了如何将SO库嵌入到JAR包中,并确保在外部应用调用该JAR包时能够正确加载和使用这些SO库。通过这种方式,开发者可以更方便地管理和分发包含原生代码的库文件,提高开发效率和代码复用性。文章还探讨了常见的问题及其解决方案,帮助开发者避免在实际应用中遇到的坑。 ... [详细]
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社区 版权所有