@cssints/运动
动画预设 点缀: 淡出、滑出、缩放和模糊, 以一个链式成员的身份进出
cssints/plugin scope()以可调和的方式 尾风-运动
财务报告和审定财务报表 尾风动物: 预设只设置自定义属性,以及
一个内核结束 keyframes() 运行他们。 没有运行时间.
import { cn, hover } from "cssints" with { type: "cssints" };
import { motion } from "@cssints/motion" with { type: "cssints" };
export const toast = motion()
.preset("slide-in-up")
.duration("500ms")
.delay("100ms")
.easing("linear");
export const leave = motion().preset("fade-out");
export const slow = cn(motion().preset("scale-in"), hover(motion().duration("1s")));
@layer _.k {
@keyframes kf-7f473efd {
from {
opacity: var(--motion-o);
translate: var(--motion-x) var(--motion-y);
scale: var(--motion-s);
filter: blur(var(--motion-b));
}
}
@keyframes kf-eaeb1c11 {
to {
opacity: var(--motion-o);
translate: var(--motion-x) var(--motion-y);
scale: var(--motion-s);
filter: blur(var(--motion-b));
}
}
@keyframes kf-4f766ef7 {
from {
opacity: var(--motion-o);
}
}
@keyframes kf-9b622913 {
to {
opacity: var(--motion-o);
}
}
._motion-core {
animation: var(--motion-n) var(--motion-d) var(--motion-e) var(--motion-l) both;
--motion-in: kf-7f473efd;
--motion-out: kf-eaeb1c11;
--motion-ri: kf-4f766ef7;
--motion-ro: kf-9b622913;
--motion-n: none;
--motion-r: none;
--motion-d: 300ms;
--motion-l: 0s;
--motion-e: ease-out;
--motion-o: 1;
--motion-x: 0;
--motion-y: 0;
--motion-s: 1;
--motion-b: 0;
}
@media (prefers-reduced-motion: reduce) {
._motion-core {
animation-name: var(--motion-r);
}
}
}
@layer _.a {
._13945js {
--motion-n: var(--motion-in);
}
._jddydc {
--motion-r: var(--motion-ri);
}
._knj5bv {
--motion-o: 0;
}
._1a9p5a9 {
--motion-y: 25%;
}
._46hkr9 {
--motion-d: 500ms;
}
/* ... */
}
规则
- 方法,每一次,任何顺序,所有可选:
preset(name), (中文(简体) ),duration(<time [0s,∞]>)(300毫秒),delay(<time>)(0s), (单位:千美元),easing(<easing-function>)(单位:千美元)ease-out) (中文(简体) ). 每一类都是设定定制属性的,所以 方法在条件下发挥作用(hover(motion().duration("1s"))) (中文(简体) ). - 预设数字 :
fade-in, (中文(简体) ),fade-out, (中文(简体) ),slide-in-up, (中文(简体) ),slide-in-down, (中文(简体) ),slide-in-left, (中文(简体) ),slide-in-right, (中文(简体) ),slide-out-up, (中文(简体) ),slide-out-down, (中文(简体) ),slide-out-left, (中文(简体) ),slide-out-right, (中文(简体) ),scale-in, (中文(简体) ),scale-out, (中文(简体) ),blur-in, (中文(简体) ),blur-out,每个变相;a 滑动 25% 的框, 缩放开始( 或结束) 0. 5, 模糊 5px (尾风- 运动的中等大小) .-in从这些值到元素本身,-out从它自己到那些, 并持有结束(both) (中文(简体) ).slide-in-up- 逐步到位;slide-out-up移动起来. - 关键框架 四岁
keyframes():进出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出 他们 读取--motion-*,所以所有预设都共享. 内核为样式并命名于--motion-in, (中文(简体) ),--motion-out, (中文(简体) ),--motion-ri财务报告和审定财务报表--motion-ro(单位:千美元)vars()),将他们的规则放在工作表中 1个(--motion-n: var(--motion-in)) (中文(简体) ). - 减少运动. 下
prefers-reduced-motion: reduce内核运行不透明唯一的密钥框架:幻灯片、缩放或 模糊变成同一时间的淡出animationend仍然开火. - 没有遗产. 内核重排每个
--motion-*所以另一部电影里面的动画 是从它自己开始的 预设,不是其父母的. - 冲突.
motion()设置动画: acn()握着它,一个animation*属性是一个构建错误, 来源于内核:cssints: motion: kernel core sets animation, animation-name (this style also sets animation-duration)。 。 。 . - 错误 语法,在类型和建设时间:
motion.preset: unexpected "spin" in "spin", expected fade-in | ..., (中文(简体) ),motion.duration: unexpected "-1s" in "-1s", expected <time [0s,∞]>。 。 。 . - 对于其他成员.
presets(按名称排列的表格),PresetName, (中文(简体) ),motionKeyframes, (中文(简体) ),motionVars(习惯 属性键框,按预设字段表示:motionVars.y实值--motion-y和motionScope(其内核)core)是导出的,所以一个建立在这些预设上的成员会重新使用它们,而从来不写--motion-*名称.
限制
- 每个元素一个预设:
preset()用于一次,而预设不会堆叠(每张幻灯片、缩放和模糊已淡出). - 关键框架
translate, (中文(简体) ),scale财务报告和审定财务报表filter: 在动画中(和之后)-out(一) 替换 元素本身;transform无人知晓. - 没有循环预设(脉冲,自旋,回弹),没有弹簧松动,没有每个预设大小.
cd packages/motion && bun run test # fixtures through the engine (output, conflicts, errors); bun run typecheck for the type test
贷项
设计( 只设置自定义属性的预设, 一个内核 over) keyframes()),预设名称和
中等尺寸(25%、0.5%、5px) 尾风-运动 (麻省理工学院,伦博)
(有限)和 尾风动物 (麻省理工学院,杰米·凯尔). 没有代码
复制.