Блог

Главная - Вопросы по программированию - Переход на новый псевдоэлемент с фильтром

Переход на новый псевдоэлемент с фильтром

#html #css #css-transitions

#HTML #css #css-переходы

Вопрос:

Я работаю над эффектом свечения для изображений. Чтобы сделать свечение более чем одним цветом, я фактически создаю копию псевдоэлемента изображения с применением фильтра размытия и насыщенности. Этот псевдоэлемент создается путем добавления класса в div изображения.

Теперь все это хорошо, но я бы хотел легко перенести эффект свечения, однако независимо от того, куда я помещаю атрибуты перехода, я просто не могу заставить его работать.

Я создал codepen для иллюстрации: https://codepen.io/anon/pen/eYGJGPG

 function addGlow() {
  document.getElementById('example').classList.toggle('mask')
} 
 .img {
  height: fit-content;
  width: fit-content;
  display: block;
  /* Doesn't transition */
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
}

.go {
  height: 400px;
  width: 400px;
  background: url("https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg");
  background-size: initial;
}

.mask::after {
  content: "";
  width: inherit;
  height: inherit;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: blur(10px) saturate(3);
  z-index: -1;
} 
 <div id="example" class="img go"></div>
<button onclick="addGlow()">Press</button>

Ответ №1:

При удалении класса .mask псевдоэлемент ::after удаляется из DOM. Вам нужно постоянно сохранять ::after в DOM, чтобы видеть, как на нем происходят переходы:

 function addGlow() {
  document.getElementById('example').classList.toggle('mask')
} 
 .img {
  height: fit-content;
  width: fit-content;
  display: block;
}

.go {
  height: 400px;
  width: 400px;
  background: url("https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg");
  background-size: initial;
}

.img::after {
  content: "";
  width: inherit;
  height: inherit;
  position: absolute;
  background: inherit;
  background-position: center center;
  z-index: -1;
  
  /* initial state */
  filter: blur(0px) saturate(0);
  transition: all 1.3s ease-out;
  -webkit-transition: all 1.3s ease-out;
  -moz-transition: all 1.3s ease-out;
  -o-transition: all 1.3s ease-out;
}

.mask::after {
  /* glow */
  filter: blur(30px) saturate(3);
} 
 <div id="example" class="img go"></div>
<button onclick="addGlow()">Press</button>

Ответ №2:

Возможно, рассмотрите возможность использования animation вместо transition . Смотрите рабочий фрагмент ниже.

 function addGlow(){
  document.getElementById('example').classList.toggle('mask')
} 
 .img {
  height: fit-content;
  width: fit-content;
  display: block;
  /* Doesn't transition */

}

.go {
  height: 400px;
  width: 400px;
  background: url("https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg");
  background-size: initial;

}


.mask::after {
  content: "";
  width: inherit;
  height: inherit;
  position: absolute;
  background: inherit;
  background-position: center center;
  z-index: -1;
  animation: example-animation .5s ease-out;
  animation-direction: normal;
  animation-iteration-count: 1;
  filter: blur(10px) saturate(3);
}

@keyframes example-animation {
  0% {
      filter: blur(0) saturate(3);

  }
  100% {
     filter: blur(10px) saturate(3);

  }
} 
 <div id="example" class="img go"></div>
<button onclick="addGlow()">Press</button>

Комментарии:

1. Я не думал об использовании анимации напрямую, спасибо! Однако в вашем примере, поскольку мы добавляем анимацию на маске, это облегчит работу только при добавлении класса, а не при его удалении, верно? Как бы я мог создать анимацию для упрощения ввода и вывода для добавляемого и удаляемого класса

2. Хороший вопрос ….. вы можете изменить анимацию, изменив animation-direction: normal; на animation-direction: reverse; , но как переключить это с помощью вашего JS-кода, я не совсем уверен. Если я смогу об этом подумать, я обновлю свой ответ.

Метки: