关于动画执行的问题

来源：8-13 书架弹出框组件开发

mylovef

2019-03-04

反复看了几遍，并查阅里相关资料，发现这类问题的讨论很少，所以还是很难理解为什么一开始动画不能执行，而且一开始进入动画是好的，淡出动画有问题的，老师第一次修改之后，原本正常的进入动画怎么会出问题里呢？
我个人的猜想，这里跟移动端点击dom延迟有关？
求老师详细解答一下，关于动画执行的一些原理，谢谢

写回答

2回答

慕神7088389

2019-03-23

popupVisible和visible同时为true的话，浏览器会一次性渲染，利用setTimeout异步强制触发重绘就可以看到动画。

Sam

2019-03-04

你好，你具体是指哪一段动画？

简单介绍一下css3动画，主要分为两种：过渡动画(transition)和帧动画(@keyframes)

过渡动画主要指定义好初始状态和结束状态，然后由css自行计算中间过程的动画。不是所有属性都支持过渡动画，必须是有中间状态的属性，比如旋转、位移、渐变，这些都是非常好的过渡动画案例。
帧动画主要指预先定义好元素在整个动画过程中将要经历的各个状态，然后又css按照我们定义好的动画进行执行和展示的过程。
过渡动画和帧动画的主要区别是：过渡动画仅仅只能定义起始和终止状态，而帧动画可以定义多个关键帧和状态。

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构，完整项目流程

1610 学习 · 1951 问题

相似问题

回答 2

回答 1

回答 2

回答 3

回答 1