Подберите цвет для анимации курсора и пролета внутри - PullRequest
Новая
       9

Подберите цвет для анимации курсора и пролета внутри

0 голосов
/ 27 августа 2018

Я использую призму для отображения токенов, и если у меня есть курсор, который оживляет мигание, проблема в том, что цвет токена установлен почти на тот же цвет, что и фон курсора:

Здесьминимальный пример: 

@keyframes terminal-blink {
  0%, 100% {
      background-color: var(--background, #000);
      color: var(--color, #aaa);
      border-bottom: none;
      border-left: none;
      margin-left: 0;
  }
  50% {
      background-color: var(--color, #aaa);
      color: var(--background, #000);
      border-bottom: none;
      border-left: none;
      margin-left: 0;
  }
}

.cursor.blink {
    -webkit-animation: terminal-blink 1s infinite steps(1, start);
       -moz-animation: terminal-blink 1s infinite steps(1, start);
        -ms-animation: terminal-blink 1s infinite steps(1, start);
            animation: terminal-blink 1s infinite steps(1, start);
}
body {
   background: black;
   font-family: monospace;
}
.token.punctuation {
    color: #999;
}
.token.tag {
    color: red;
}
<div>
  <span class="cursor blink">
     <span style="font-weight:bold;" class="token punctuation" data-text="<">&lt;</span>
  </span>
</div>
<br/>
<div>
  <span class="cursor blink">
     <span style="font-weight:bold;" class="" data-text="x">x</span>
  </span>
</div>

<div>
  <span class="cursor blink">
     <span style="font-weight:bold;" class="token tag" data-text="x">x</span>
  </span>
</div>

Я пытался установить другую анимацию, которая будет перезаписывать .token.punctuation, используя: 

 @keyframes prism-cursor {
     0%, 100% {
         color: currentColor;
     }
     50% {
         color: #000;
     }
 }
 .cursor .token {
     animation: prism-cursor 1s infinite steps(1, start);
 }

, но она не работаети это не синхронизировано, похоже, что есть 3 шага анимации.

Я хочу иметь color: var(--color), когда курсор виден (анимация на 50%), но быть цветом из .token, когда курсор невидим 0%, 100%.(.token.tag должен быть красным на черном фоне и черным на сером).

Вот пример реального кода, который у меня есть https://codepen.io/jcubic/pen/MqyvEG

Возможно ли что-то подобное без изменения .token cssни HTML?

Ответы [ 3 ]

0 голосов
/ 27 августа 2018

Сначала я бы предложил рассмотреть что-то другое, чем steps.Как я объяснил в другом вопросе ( Анимация переключения цвета границы CSS: цвет «из» неправильный ), это может привести к путанице в том, как это работает.

Учитывая это, вы можете легко применить второйанимация без синхронизации: 

@keyframes terminal-blink {
  0%,
  50% {
    background-color: var(--background, #000);
    color: var(--color, #aaa);
    border-bottom: none;
    border-left: none;
    margin-left: 0;
  }
  50.1%,
  100% {
    background-color: var(--color, #aaa);
    color: var(--background, #000);
    border-bottom: none;
    border-left: none;
    margin-left: 0;
  }
}

@keyframes prism-cursor {
  0%,
  50% {
    color: var(--c,white);
  }
  50.1%,
  100% {
    color: #000;
  }
}

.cursor.blink {
  animation: terminal-blink 1s infinite linear;
}

body {
  background: black;
  font-family: monospace;
}

.token.punctuation {
  --c:red;
  color: var(--c);
  animation: prism-cursor 1s infinite linear;
}
<div>
  <span class="cursor blink">
     <span style="font-weight:bold;" class="token punctuation" data-text="<">&lt;</span>
  </span>
</div>
<br>
<div>
  <span class="cursor blink">
     <span style="font-weight:bold;" class="" data-text="x">x</span>
  </span>
</div>

И вы можете сократить код до одной анимации, если переместите все классы на одном уровне: 

@keyframes terminal-blink {
  0%,
  50% {
    background-color: var(--background, #000);
    color: var(--c, #aaa);
    border-bottom: none;
    border-left: none;
    margin-left: 0;
  }
  50.1%,
  100% {
    background-color: var(--color, #aaa);
    color: var(--background, #000);
    border-bottom: none;
    border-left: none;
    margin-left: 0;
  }
}

.cursor.blink {
  animation: terminal-blink 1s infinite linear;
}

body {
  background: black;
  font-family: monospace;
}

.token {
  --c:red;
  color: var(--c);
}
.punctuation {
  --c:green;
  color: var(--c);
}
<div>
  <span class="cursor blink token ">
     <span style="font-weight:bold;" data-text="<">&lt;</span>
  </span>
</div>
<br>
<div>
  <span class="cursor blink punctuation">
     <span style="font-weight:bold;" class="" data-text="x">x</span>
  </span>
</div>
0 голосов
/ 05 сентября 2018

Я закончил с этим кодом.Сначала я добавил еще один диапазон внутри того, который имеет фон, и применил этот код: 

.cmd span[data-text] span {
    background: inherit;
    color: inherit;
}
.cmd .cursor.blink > span[style*="background"] span {
    animation: terminal-blink-span 1s infinite steps(1, start);
    position: absolute;
    top: 0;
}
.cmd .cursor.blink > span[style*="background"] {
    postion: relative;
    min-width: 1ch;
    display: inline-block;
}
/*
 * I've created another css var here, because
 * I've added --color to span and I've needed to
 * have a way to select original color as backgound
 * for cursor animation
 */
.cmd {
    --original-color: var(--color, #aaa);
}
@keyframes terminal-blink-span {
    0%, 100% {
        background: inherit;
        color: inherit;
    }
    50% {
        background: var(--original-color, #aaa);
        color: var(--background, #000);
    }
}
0 голосов
/ 27 августа 2018

Вы можете создать другой ключевой кадр, который соответствует времени первого и синхронизирует изменение цвета. 

@keyframes terminal-blink {
  0%, 100% {
  background-color: var(--background, #000);
  color: var(--color, #aaa);
  border-bottom: none;
  border-left: none;
  margin-left: 0;
  }
  50% {
  background-color: var(--color, #aaa);
  color: var(--background, #000);
  border-bottom: none;
  border-left: none;
  margin-left: 0;
  }
}

@keyframes textHighlight {

  0%, 100% {
color: red;
  }
  50% {
color: blue;
  }
}

.cursor.blink {
-webkit-animation: terminal-blink 1s infinite steps(1, start);
   -moz-animation: terminal-blink 1s infinite steps(1, start);
    -ms-animation: terminal-blink 1s infinite steps(1, start);
        animation: terminal-blink 1s infinite steps(1, start);
}
.token {
-webkit-animation: textHighlight 1s infinite steps(1, start);
   -moz-animation: textHighlight 1s infinite steps(1, start);
    -ms-animation: textHighlight 1s infinite steps(1, start);
        animation: textHighlight 1s infinite steps(1, start);
}
body {
   background: black;
   font-family: monospace;
}
<div>
  <span class="cursor blink">
     <span style="font-weight:bold;" class="token" data-text="<">&lt;</span>
  </span>
</div>
<br/>
<div>
  <span class="cursor blink">
     <span style="font-weight:bold;" class="token" data-text="x">x</span>
  </span>
</div>
...