css - How to run CSS animation while elements are added to page?
问题描述
I have noticed that when angular updates a page by adding a lot of elements even CSS animations stop running. I created a stackblitz here https://stackblitz.com/edit/angular-fefvpa to highlight the issue. When you hit the "Add Elements" button, the red square stops moving for about half a second. What can I do to circumvent that?
解决方案
One solution i can think of that might help you is to use transform: translateX
in the animation instead of left
.
your anim would look like
@keyframes mymove {
from {transform: translateX(0)}
to {transform: translateX(400px)}
}
You can also add transform:translateZ(0)
to the #box
itself
The animation will use less ' GPU ' and by adding transform:translateZ(0)
you will also make the browser use more GPU for that animation. So it might run smoother.
I tested it on my pc and it doesn't ' freeze ' anymore when adding items.
推荐阅读
- python - 如何使用 GeoPandas 绘制多个图层
- wpf - WPF Grid ColumnSpan 内容动态宽度重新格式化其他内容
- javascript - 将 QtQuick / QML 对象传递给 javascript 函数后访问其属性
- php - 从页面上的mysql清除所有显示的记录
- node.js - 需要从 Config 属性中选择值 - Node plus react app
- ruby-on-rails - restrict_dependent_destroy 的 I18n 错误消息:插值 %{record} 是小写的,这在德语中的语法不正确
- php - 如何使用 PHP 反射 API 编写和使用 PHP 依赖注入容器
- java - DataOutputStream.writeBytes 产生空指针异常
- jquery - Jquery 自动完成导致未定义错误的“_renderItem”
- powershell - Remove-WebBindings 从所有 IIS 站点中删除绑定