Question

文档说edit.cursorBlinking的选项是'blink'，'smooth'，'phase'，'expand'和'solid'。它没有描述每种方法的含义。

这些都有什么作用？

Answer 1

额外的光标动画构思详细here，并指向JSFiddle showing the five new options。以下样式显示了每个样式：

@keyframes blink  {   0%,  49% { opacity: 0; }
                     51%, 100% { opacity: 1; }
}
@keyframes smooth {   0%,  20% { opacity: 0; }
                     60%, 100% { opacity: 1; }
}
@keyframes phase  {   0%,  20% { opacity: 0; }
                     90%, 100% { opacity: 1; }
}
@keyframes expand {   0%,  20% { transform: scaleY(0); }
                     80%, 100% { transform: scaleY(1); }
}

基本上：

blink在给定状态下花费49％，在过渡中花费2％，在另一个州花费49％。过渡，在这个和大多数下面只涉及改变不透明度。因为这（和其他人）指定alternate（动画在交替方向上运行），这意味着在给定状态下为98％，在向另一个状态转换为2％。
smooth在特定州内花费60％，40％过渡到另一州。
phase在特定州消费30％，过渡70％。
expand在特定州投入40％，60％过渡。在这种情况下的转换不是不透明度，而是在y轴上缩放，这意味着它从垂直中点增长并缩小到垂直中点。
solid表示根本没有闪烁，光标始终存在。

为了使答案自成一体，我已经将JSFiddle中的相关内容复制到下面（压缩，更好地标记不同的样式）。只需运行代码段即可获得更直观的表示：

＆＃13;

body { font-family: "Menlo", "Monaco", "Courier New", "Courier"; font-size: 9pt; background-color: black; color: #fff; }
.line { line-height: 18px; background-color: #333; overflow: hidden; margin: 2px; vertical-align: middle; }
.cursor { position: relative; top: 2px; width: 5px; height: 14px; background-color: #eee; display: inline-block; margin-left: 1px; margin-right: 1px; }

@keyframes blink { 0%, 49% { opacity: 0; } 51%, 100% { opacity: 1; } }
@keyframes smooth { 0%, 20% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes phase { 0%, 20% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes expand { 0%, 20% { transform: scaleY(0); } 80%, 100% { transform: scaleY(1); } }

.blink { animation: blink 0.5s ease-in-out 0s infinite alternate; }
.smooth { animation: smooth 0.5s ease-in-out 0s infinite alternate; }
.phase { animation: phase 0.5s ease-in-out 0s infinite alternate; }
.expand { animation: expand 0.5s ease-in-out 0s infinite alternate; }

＆＃13;

<div class="line"><div class="cursor blink"></div>-blink</div>
<div class="line"><div class="cursor smooth"></div>-smooth</div>
<div class="line"><div class="cursor phase"></div>-phase</div>
<div class="line"><div class="cursor expand"></div>-expand</div>
<div class="line"><div class="cursor solid"></div>-solid</div>

＆＃13;

editor.cursorBlinking做什么？

1 个答案: