首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >我能否在情感-js中使用“for循环”,类似于在sass中使用“for”?

我能否在情感-js中使用“for循环”,类似于在sass中使用“for”?
EN

Stack Overflow用户
提问于 2020-01-31 16:09:36
回答 2查看 1.1K关注 0票数 2

如果我写:

@for $i from 1 through 3 li:nth-child(#{$i}) transition-delay: #{$i * 0.3}s

,我可以为每个list元素获得一个很好的渐进式转换延迟。

有可能用情绪化的方式来做吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-03 08:35:18

好吧我已经猜到了。

首先我创建一个JS函数,它执行我的循环,然后将样式作为一个对象返回。

代码语言:javascript
运行
复制
const menuListTrans = () => {
  let styles = {};
  for (let $i = 0; $i < 10; $i++) {
    styles["&:nth-child(" + $i + ")"] = {
      transitionDelay: "1s," + $i * 0.08 + "s",
    };
  }
  return styles;
};

然后将其插入到样式组件中。

代码语言:javascript
运行
复制
const MenuList = styled.ul`
  &.expanded > li {
    transform: translateY(0);
    ${menuListTrans}
  }
`;
票数 1
EN

Stack Overflow用户

发布于 2020-07-15 20:13:04

这里有相同的方法,但使用变量。

代码语言:javascript
运行
复制
export const nthChildDelay = ({ count = 10, delay = 100, multiplier = 80 }) => {
  const styles = {};
  [...Array(count).keys()].forEach((_, index) => {
    if (index !== 0) {
      styles[`&:nth-child(${index})`] = {
        transitionDelay: `${delay + (index - 1) * multiplier}ms`,
      };
    }
  });
  return styles;
};

然后用它作为

代码语言:javascript
运行
复制
${nthChildDelay({ count: 10, delay: 100, multiplier: 100 })};
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60007475

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档