css - SASS 的关键帧参数
问题描述
我在 CSS 中创建了一个旋转轮播,对此我很满意。它包含在片段中。原件在这个 CodePen上。
它基本上旋转了四个盒子的位置。总动画时间为 8 秒,我已将其设置为 20% 保持静态,然后将框移动 5%,然后再次等待(运行代码段;我想我没有解释过很好)。
现在我想参数化它。Sass 是我选择的武器,我可以轻松设置一些有用的变量。所以就在我的风格的顶部,我有这个:
$delays: 0s, -6s, -4s, -2s;
$fullanimtime: 8s;
$animationstops: 0%, 20%, 25%, 45%, 50%, 70%, 75%, 95%, 100%;
我使用$fullanimtime
as my animation-duration
,并使用$delays
列表来配置我的pos-XXXX
样式的延迟:
.pos-1 {
animation-delay: nth($delays, 1);
}
.pos-2 {
animation-delay: nth($delays, 2);
}
.pos-3 {
animation-delay: nth($delays, 3);
}
.pos-4 {
animation-delay: nth($delays, 4);
}
这就像一个魅力,通过正确设置$fullanimtime
,$delays
我可以将动画更改为在任何时间正确运行,无论是 8 秒还是 120 秒。
问题是@keyframes
使用百分比。因此,如果我将其他变量设置为较长的动画时间,移动框的实际过渡会变得非常慢:8 秒,过渡运行 400 毫秒,但 120 秒,它们需要 6 秒,这比凉爽的。
所以这个$animationstops
变量应该让我配置合理的时机。但这不起作用。
由于我不明白的原因,我不能nth
在关键帧声明中使用 Sass 函数,也不能使用 Sass 变量。
@keyframes rotate-board {
nth($animationstops, 1) {
// This gives an error:
// Invalid CSS after "nth": expected keyframes selector, was "($animationstop..."
}
$somevariable {
// This gives an error:
// Invalid CSS after " $somevalue ": expected ":", was "{"
}
}
有没有办法解决这个问题,还是我发现了 Sass 的限制?如果我想这样做,是否应该使用另一个预处理器?
body {
margin: 0;
padding: 0;
}
.frame {
height: 580px;
width: 100vw;
background: lightgrey;
position: relative;
box-sizing: border-box;
}
.box {
width: calc(50% - 30px);
height: calc(50% - 30px);
top: 20px;
left: 20px;
position: absolute;
animation-name: rotate-board;
animation-duration: 8s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.redbox {
background: red;
}
.greenbox {
background: green;
}
.bluebox {
background: blue;
}
.orangebox {
background: orange;
}
@keyframes rotate-board {
0% {
top: 20px;
left: 20px;
bottom: calc(50% + 10px);
right: calc(50% + 10px);
}
20% {
top: 20px;
left: 20px;
bottom: calc(50% + 10px);
right: calc(50% + 10px);
}
25% {
top: 20px;
left: calc(50% + 10px);
bottom: calc(50% + 10px);
right: 20px;
}
45% {
top: 20px;
left: calc(50% + 10px);
bottom: calc(50% + 10px);
right: 20px;
}
50% {
top: calc(50% + 10px);
left: calc(50% + 10px);
bottom: 20px;
right: 20px;
}
70% {
top: calc(50% + 10px);
left: calc(50% + 10px);
bottom: 20px;
right: 20px;
}
75% {
top: calc(50% + 10px);
left: 20px;
bottom: 20px;
right: calc(50% + 10px);
}
95% {
top: calc(50% + 10px);
left: 20px;
bottom: 20px;
right: calc(50% + 10px);
}
100% {
top: 20px;
left: 20px;
bottom: calc(50% + 10px);
right: calc(50% + 10px);
}
}
.pos-1 {
animation-delay: 0s;
}
.pos-2 {
animation-delay: -6s;
}
.pos-3 {
animation-delay: -4s;
}
.pos-4 {
animation-delay: -2s;
}
<div class="frame">
<div class="box redbox pos-1"></div>
<div class="box greenbox pos-2"></div>
<div class="box bluebox pos-3"></div>
<div class="box orangebox pos-4"></div>
</div>
解决方案
你可以这样写你的变量:
#{nth($animationstops, 1)}
我为你创建了一个 Sassmeister: https ://www.sassmeister.com/gist/7c9b06c6b5a7cc580b14cbd1b312c566
它在这里工作:https ://codepen.io/anon/pen/PBeNLV
PS:你的动画很漂亮!恭喜!:)
推荐阅读
- sql - 如何在遍历字符串数组的循环中获取选择查询的每个第一个结果?
- ms-access - 从文件夹中的图片循环播放图像幻灯片时出错
- javascript - d3.js Chart - QQ Plot - 图表各部分的不同颜色
- javascript - 使用 pm2 访问 NodeJS 登录服务器
- javascript - 找不到在运行时更改 reactjs 元素位置的方法
- javascript - 上传意图对话框流时枚举数据类型出错
- java - 在 Spring Boot 中读取 url 编码数据
- javascript - 如果类 x 包含 z 的 javascript 获取类 y 的链接
- javascript - CKEditor 只允许带有特定属性的标签
- list - Java8 For Each Loop 跳过第一次迭代