Как остановить анимацию CSS на гиперссылке после ее посещения? - PullRequest
Новая
       12

Как остановить анимацию CSS на гиперссылке после ее посещения?

1 голос
/ 16 июня 2019

Я пытаюсь использовать CSS-анимацию, чтобы гиперссылка мигала до тех пор, пока она не была посещена.Однако мой текущий код не работает - он продолжает мигать даже после нажатия.

Как заставить ссылку перестать мигать после ее посещения?

Мой CSS: 

blink {
    -webkit-animation: 0.5s linear infinite condemned_blink_effect; 
    animation: 1.5s linear infinite condemned_blink_effect;
}

@-webkit-keyframes condemned_blink_effect { 
    0% {
        visibility: hidden;
    }

    50% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

@keyframes condemned_blink_effect {
    0% {
        visibility: hidden;
    }

    50% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

blink:visited{
    -webkit-animation: none;
    animation: none;
}

Мой PHP-код, который генерирует ссылку HTML: 

echo "<td width='150'><a href='dispdata.php?id=" . $dataReturn->dataID . "'><blink>View </a><blink></td> ";

1 Ответ

1 голос
/ 16 июня 2019

Элемент <blink> никогда не был частью стандарта HTML и в какой-то момент был шуткой, добавленной в версию Netscape. Современные браузеры вообще не поддерживают этот элемент, потому что все согласны с тем, что мерцающие элементы раздражают. Подробнее см. Здесь.

Вы можете по-прежнему создавать мигающий эффект через CSS, как вы пытались, но ваши селекторы неверны. :visited может применяться только к ссылкам (<a> элементам), но вы написали blink:visited. Это не сработает, так как это означает «выбрать все <blink> элементов, которые также посещены <a> элементов». Элемент не может быть и тем и другим, поэтому селектор никогда не работает.

Наконец, стили, которые можно установить для селектора :visited, ограничены из-за потенциальных угроз безопасности. Можно использовать этот селектор, чтобы украсть историю просмотров пользователя. Подробнее см. Здесь. Если вы хотите, чтобы конкретная ссылка открыла страницу в новой вкладке, а затем перестала мигать, вам понадобится JavaScript.

Например, вы можете использовать CSS-класс blinking, чтобы сделать ссылку мигающей, а затем удалить класс из элемента при нажатии на него. В этом коде я поместил мигающий эффект на вложенный элемент <span>, потому что в противном случае вы бы не смогли щелкнуть ссылку, пока она скрыта анимацией.

Опять же, это не то, что я бы рекомендовал использовать вообще, так как это будет раздражать ваших пользователей. 

function stopBlinking(e) {
  e.currentTarget.classList.remove("blinking");
}

const blinking = document.querySelectorAll(".blinking");
for (link of blinking) {
  link.addEventListener("click", stopBlinking);
}
.blinking span {
  -webkit-animation: 0.5s linear infinite condemned_blink_effect; 
  animation: 1.5s linear infinite condemned_blink_effect;
}

@-webkit-keyframes condemned_blink_effect { 
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

@keyframes condemned_blink_effect {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
<a href="#" class="blinking"><span>Sample link</span></a><br>
<a href="#" class="blinking"><span>Sample link</span></a><br>
<a href="#" class="blinking"><span>Sample link</span></a>
...