Анимация внутри: целевой псевдоэлемент срабатывает только при первом нажатии - PullRequest
Новая
       9

Анимация внутри: целевой псевдоэлемент срабатывает только при первом нажатии

0 голосов
/ 20 мая 2018

Я хочу выделить какой-то элемент HTML при нажатии на другой элемент.Классическое решение с использованием CSS выглядит следующим образом: HTML 100 * 

<!DOCTYPE html>
<html>
  <body>
    <div>
      There are <a href="#fermions">Fermions</a> 
      and <a href="#bosons">Bosons</a>.
      <div class="highlightable" id="fermions">
        Bosons are very social particles!
      </div>
      <div class="highlightable" id="bosons">
        Fermions only goes out as a couple!
      </div>
    </div>
  </body>
</html>

и следующий CSS 

@keyframes highlight {
  0% {
    background: LightSkyBlue;
  }
  100% {
    background: none;
  }
}

.highlightable:target {
  animation: highlight 1s;
}

Вот скрипта , реализующая эту .Когда я нажимаю «Фермионы», div «Фермионы выходят только как пара!»Основные моменты.Хорошо!Когда я снова нажимаю на «Fermions», он больше не выделяется.Но если я нажму на «Бозоны», выделив, таким образом, другой div, а затем снова на Фермионах, то снова появится div с Фермионами.

Может ли кто-нибудь объяснить, что происходит?Является ли единственным решением всегда выделять кликом соответствующий div для использования Javascript?

1 Ответ

0 голосов
/ 20 мая 2018

Объяснение того, что вы видите:

Если ваш браузер в данный момент указывает на этот адрес: 

mysite.com/mypage/

, и вы нажимаете <a href="#fermions">, ваш браузер теперь будет указывать на:

mysite.com/mypage/#fermions

Это вызовет анимацию псевдокласса :target.

Если вы теперь снова нажмете <a href="#fermions"> ... вы никуда не денетесь - потому что выуже там.

Таким образом, анимация не будет запускаться.

Достижение этого эффекта (только CSS):

Я ценю, что вы, вероятно, хотите использовать только CSSспособ создания этого эффекта, но ... вы можете только (вроде) реагировать на пользовательские клики через CSS с использованием :focus и :target.В обоих случаях вы увидите, что как только вы войдете в данное состояние (и анимация будет запущена один раз), вы останетесь в этом состоянии (и анимация не запустится снова), пока вы не будете активно менять состояние.

Тем не менее, вы можете создать желаемый эффект, отвечая пользователю наведением мыши через CSS, используя псевдокласс :hover.

Рабочий пример: 

[href="#fermions"]:hover ~ #fermions,
[href="#bosons"]:hover ~ #bosons {
animation: highlight 1.2s ease-out 0.15s;
}

@keyframes highlight {
  0% {background: LightSkyBlue;}
100% {background: none;}
}
<div>
There are <a href="#fermions">Fermions</a> and <a href="#bosons">Bosons</a>.

<p class="highlightable" id="bosons">
Bosons are very social particles!</p>

<p class="highlightable" id="fermions">Fermions only goes out as a couple!</p>
</div>
...