小编Jau*_*Mal的帖子

当动态添加元素并且在页面加载之前不知道其宽度时，是否可以animation-duration使用 相对于元素的宽度进行设置？calc

我有几个“新闻行情”，其中的文本使用此关键帧从右到左无限水平翻译：

@keyframes ticker {
  0% {
    transform: translateX(1%);
    visibility: visible;
  }
  100% {
    transform: translateX(-101%);
  }
}

还有这个CSS：

  animation-name: ticker;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

translateX 中的百分比指的是正在翻译的元素。所以 101% 比元素本身的宽度多 1%。

因此，元素的宽度会影响平移速度。较宽的元素运行速度较快，以便在 10 秒内执行动画，而较短的元素运行速度较慢。

这是一个工作示例，它满足我的工作场景的一些布局需求：

@keyframes ticker {
  0% {
    transform: translateX(1%);
    visibility: visible;
  }
  100% {
    transform: translateX(-101%);
  }
}

  animation-name: ticker;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

我想为动画持续时间提供一个与元素宽度相关的值，这样我就可以使所有滚动条以相同的速度移动，而不管宽度如何。

我想也许我可以用calc()10 乘以或除以元素宽度的值。不幸的是，这里元素的宽度是动态的，因为它是由元素内的字符串定义的，并且该字符串在页面加载之前是未知的。

谢谢

字体大小似乎适用于字体“框”的高度，据我所知，它是在字体文件本身中定义的。因此，对于相同的字体大小，任何字符，无论其视觉高度如何，都应该位于等高的框内。

那么，字符的宽度在哪里定义？

字符宽度也需要与 font-size 相关，但每个字符似乎都有不同的宽度（通过this test或this test）。它不规则，因为高度似乎是这种情况。因此，定义每个字符的宽度的不是字体中定义的框的宽度。

那么，它在哪里/如何定义？

我在使用 Symfony 5、encore、stimulus 等加载 Bootstrap 的 js 时遇到困难...

jquery、popper、corejs 等都已安装，并且至少 jquery 正在工作......

app.scss 和 app.js 似乎可以使用 sass、postcss 和 babel（包括 Bootstrap 的 CSS）很好地编译。只是 Bootstrap 的 JS 不存在，所以没有下拉菜单等。

资产/app.js

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

资产/引导程序，js

import { startStimulusApp } from '@symfony/stimulus-bridge';

// Registers Stimulus controllers from controllers.json and in the controllers/ directory
 export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.(j|t)sx?$/
));

// …