如果我写:
@for $i from 1 through 3 li:nth-child(#{$i}) transition-delay: #{$i * 0.3}s
,我可以为每个list元素获得一个很好的渐进式转换延迟。
有可能用情绪化的方式来做吗?
发布于 2020-02-03 08:35:18
好吧我已经猜到了。
首先我创建一个JS函数,它执行我的循环,然后将样式作为一个对象返回。
const menuListTrans = () => {
let styles = {};
for (let $i = 0; $i < 10; $i++) {
styles["&:nth-child(" + $i + ")"] = {
transitionDelay: "1s," + $i * 0.08 + "s",
};
}
return styles;
};
然后将其插入到样式组件中。
const MenuList = styled.ul`
&.expanded > li {
transform: translateY(0);
${menuListTrans}
}
`;
发布于 2020-07-15 20:13:04
这里有相同的方法,但使用变量。
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;
};
然后用它作为
${nthChildDelay({ count: 10, delay: 100, multiplier: 100 })};
https://stackoverflow.com/questions/60007475
复制相似问题