Использование CSS-анимации для скрытия элемента в течение n секунд после загрузки страницы - PullRequest
1 голос
/ 18 мая 2019

Несколько лет назад мы добавили заметку на нашу веб-страницу для пользователей, которые блокируют JS.Мне бы очень хотелось, чтобы записка была скрыта для людей, у которых JS включен.Видимость заметки зависит от тела, имеющего класс body class="noJS".Для того, чтобы удалить это как можно быстрее, у меня есть JS в качестве самого первого элемента в теге body, который не полагается ни на что, а запускается сразу.

<!-- BODY element exists! -->
<script type="text/javascript">
    /*<![CDATA[*/ 
        document.body.className = document.body.className.replace(new RegExp(\'(?:^|\\s)\'+ \'no-js\' + \'(?:\\s|$)\'), \' \'); 
    /*]]>*/ 
</script>

В Firefox я все еще вижу заметку каккрасное мерцание, например, в верхней части главной страницы здесь https://www.colorperfect.com

Раздражает, что приводит к моему вопросу, могу ли я использовать анимацию CSS3, чтобы исчезнуть в этой заметке, скажем, с задержкой в ​​одну секунду?Это должно исправить это, я думаю, но я никогда ничего не делал с CSS-анимацией, так что я решил спросить, а не играть ... Если это не сработает, другие идеи тоже будут приветствоваться.

Изменить:

Это CSS, который создает красный блок.Простой вопрос обмена фоном и высотой.

body.noJS .single_navi_zeile
{
  background-color:#BB0000;
  height:12.7em;
  background-position: left 0.5em bottom 0.3em;
  background-repeat: no-repeat;
  background-image: url("../grafik/nojs.png");
}

Ответы [ 2 ]

1 голос
/ 18 мая 2019

Это должно дать вам эффект затухания, к которому вы стремитесь.Задержка анимации откладывается, когда анимация запускается, поэтому вы можете в конечном итоге увидеть элемент, а затем внезапно исчезнуть и снова исчезнуть.Если вы начнете анимацию сразу, но начнете с opacity: 0, а затем через 1 с (50% от длительности 2 с) вернитесь в нее, вы получите то, что вам нужно.

@keyframes fade-in {
  0% {opacity: 0}
  50% {opacity: 0}
  100% {opacity: 1}
}

.anim-fade-in {
  animation-name: fade-in;
  animation-duration: 2s;
}
<p class="anim-fade-in">Some content</p>

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

1 голос
/ 18 мая 2019

вы пробовали css для этого?

.redBanner {
  display: none;
}
body.no-js .redBanner {
  display: block;
}

или с вашим примером

body.no-js .single_navi_zeile {
  background-color:#BB0000;
  height:12.7em;
  background-position: left 0.5em bottom 0.3em;
  background-repeat: no-repeat;
  background-image: url("../grafik/nojs.png");
}
...