使用jQuery.Keyframes时如何将变量值应用到关键帧动画属性配置

变量动态赋值的正确写法 #

如果你的bigSlide.width是不带单位的数值类型，直接拼接对应单位生成合法的CSS字符串即可：

$.keyframe.define([{
  name: 'slidein',
  from: {'margin-left': '100%'},
  // 若变量本身就是带单位的字符串（比如"630px"），直接写变量即可，不用额外拼接
  to: {'margin-left': bigSlide.width + 'px'} 
}]);

如果需要在值中引入变量计算，可以用模板字符串拼接：

// 示例：margin-left值为 bigSlide.width + 100px 的总和
to: {'margin-left': `${bigSlide.width + 100}px`}

calc语法的正确写法 #

你之前的calc写法失效是因为不符合CSS规范：calc的运算符前后必须加空格，同时要把整段calc表达式包裹为字符串，避免被JS识别为原生方法调用：

// 固定值calc写法
to: {'margin-left': 'calc(100px + 630px)'}

// 带变量的calc写法
to: {'margin-left': `calc(100vw - ${bigSlide.width}px)`}

之前写法的错误原因 #

• 把变量放在引号内部，会被识别为纯文本，不会解析对应的变量值
• calc运算符前后未加空格，浏览器无法识别该CSS语法
• 未把calc表达式整体包裹为字符串，JS会尝试调用不存在的全局calc方法直接报错
• 数值类型变量未拼接单位，生成的CSS值不合法，无法被动画识别

内容的提问来源于stack exchange，提问作者Ross Symonds