@碳/运动
使用碳设计的数字和软件产品的动议助手 系统
开始
要安装 @carbon/motion 在您的工程中, 您需要运行以下
命令使用 无数字 :
npm install -S @carbon/motion
如果你喜欢 雅伦,使用以下命令 相反:
yarn add @carbon/motion
使用量
@carbon/motion 支持标准曲线、出入口曲线和出入口曲线为 二
运动模式:生产性和表现性。 它还提供期限标志和
名为运动表面。 您可以使用 Sass 或 JavaScript 访问这些 .
构建注释 : 脚本值在构建时生成:
tokens/motion.tokens.json财务报告和审定财务报表tokens/surfaces.tokens.json运行yarn build(或npm run build克隆后一次js/generated/财务报告和审定财务报表scss/generated/在场.
萨斯
@carbon/motion 出口a motion 函数和 motion 用于放松的混合
曲线、 长度符号变量, a surface 函数和 surface 混合用于
名为运动表面。 把包裹带进来 @use数字 :
@use '@carbon/motion';
.my-selector {
// Easing curve — productive mode by default
transition-timing-function: motion.motion(standard);
}
.my-selector-expressive {
// Easing curve with explicit mode, set as transition-timing-function
@include motion.motion(standard, expressive);
}
.my-panel {
// Apply a named motion surface (handles enter/exit keyframes and timing)
@include motion.surface(contextual);
}
可用的持续时间变量 :
@use '@carbon/motion';
.my-selector {
transition-duration: motion.$duration-fast-01; // 70ms
transition-duration: motion.$duration-moderate-01; // 150ms
transition-duration: motion.$duration-slow-01; // 400ms
}
Java 脚本
如果你在用的话 @carbon/motion 作为JavaScript的依赖,我们出口放松,
期限符号, a motion 函数和地表公用事业:
// ESM
import {
easings,
motion,
// Duration tokens
durationFast01,
durationModerate01,
durationSlow01,
// Surface utilities
surfaces,
getMotionSurface,
defineMotionSurface,
} from '@carbon/motion';
motion('standard', 'productive'); // Returns a string `cubic-bezier()` function
getMotionSurface('contextual'); // Returns the surface definition object
捐款
我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 贡献指南!
许可证
凭 Apache 2.0 许可证。 。 。 .
IBM 遥测
本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .