我试图通过在每次迭代中延迟动画几秒来找出应用级联样式效果的人:
.stashCard { background-color:white; } .in(@delay) { -webkit-animation: swing-in-left-bck .6s cubic-bezier(.175,.885,.32,1.275) @delay both; animation: swing-in-left-bck .6s cubic-bezier(.175,1.275) @delay both } .out(@delay) { -webkit-animation: fade-out .2s ease-out @delay both; animation: fade-out .2s ease-out @delay both } .baseKid { width: 50px; height: 50px; display: inline-block; } .selected { .kid(); color:yellow; } .kid { .out(0s); .baseKid(); } .stashCard:hover .kid { .in(0s); .baseKid(); } .stashCard:hover .kid.selected { .in(0s); .baseKid(); } .stashCard:hover .kid2.selected { .in(0.05s); .baseKid(); } .stashCard:hover .kid2 { .in(0.05s); .baseKid(); } .stashCard:hover .kid3.selected { .in(0.1s); .baseKid(); } .stashCard:hover .kid3 { .in(0.1s); .baseKid(); } .hover { -webkit-animation: text-shadow-drop-center .6s both; animation: text-shadow-drop-center .6s both } .unhover { -webkit-animation: untext-shadow-drop-center .6s both; animation: untext-shadow-drop-center .6s both }
这就是我应用它的方式:
export const PopupMenu = (props: InputProps) => { return <div className="menu" style={props.style}> <VoteOption count="actors" className={props.selectedCounts.indexOf("actors") >= 0 ? "selected kid" : "kid"} onClick={props.onClick} icon="sentiment_very_satisfied" tip="Real actors" /> <VoteOption count="audio" className={props.selectedCounts.indexOf("audio") >= 0 ? "selected kid2" : "kid2"} onClick={props.onClick} icon="music_video" tip="Great audio quality" /> <VoteOption count="picture" className={props.selectedCounts.indexOf("picture") >= 0 ? "selected kid3" : "kid3"} onClick={props.onClick} icon="photo_camera" tip="Great picture quality" /> </div>; }
显然这是低效的,需要大量的复制粘贴,有没有一种方法可以让我可以添加尽可能多的投票选项,少可以写出css,它将遍历所有子组件并应用正确的偏移量开始时间?
解决方法
您可以使用循环来实现它:
.in(@delay) { -webkit-animation: swing-in-left-bck .6s cubic-bezier(.175,1.275) @delay both } .out(@delay) { -webkit-animation: fade-out .2s ease-out @delay both; animation: fade-out .2s ease-out @delay both } .baseKid { width: 50px; height: 50px; display: inline-block; } .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration .kid@{counter} { .in(0.05s * (@counter - 1)); .baseKid(); } .kid@{counter}.seleted { width: (10px * @counter); // code for each iteration } } .stashCard:hover { .loop(5); // launch the loop }
原文地址:https://www.jb51.cc/css/214920.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。