Блог

Главная - Вопросы по программированию - Добавление анимации блеска, не работающей в особых случаях

Добавление анимации блеска, не работающей в особых случаях

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть эта функция для подсветки любого текстового элемента, который передается ему.

Первый пример здесь работает нормально (второй пример не работает, я предоставляю это на случай, если это поможет нам выяснить проблему):

 function Shine(textElement) {
    textElement.classList.remove("shine");
    setTimeout(() => textElement.classList.add("shine"), 20);
    textElement.addEventListener("webkitAnimationEnd", shineEnd);
    function shineEnd(e) {
       if (e.animationName === 'shine') {
           //textElement.classList.remove("shine");
           textElement.removeEventListener("webkitAnimationEnd", shineEnd);
       } 
    } 
}


setTimeout(() => {
    const prepareCaption = document.querySelector(".prepareCaption");
    Shine(prepareCaption);
}, 2500); 
 .prepare-container {
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: 0 auto;
  left: 2.5%;
  height: 20vh;
  width: 95%;
  z-index: 11;
  top: 55vh;
  padding-top: 10px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.prepareCaption {
  position: relative;
  filter: drop-shadow(2px 2px 2px #100021) drop-shadow(1px .05em 1px #0d021a);
  text-align: center;
  width: 100%;
  color: #f8f7fa;
  margin: 0 auto;
  opacity: 1;
  top: 0vh;
  transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}



.shine {
  background-color: currentColor;
  background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-position: -100%, 0%;
  background-repeat: no-repeat, repeat;
  background-size: 60%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: shine 4s ease-out 1 forwards;
}

@keyframes shine {
  from { background-position: -100%, 0%; }
  to { background-position: 200%, 0%; }
} 
 <div class="prepare-container">
        <p class="prepareCaption" style="color: rgb(255, 0, 64); font-family: amp;quot;Open Sans Semiboldamp;quot;; font-size: 28px;">This is shining</p>
    </div>

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

Примечание: функция блеска идентична в обоих случаях. единственное отличие — это элемент, который я передаю функции.

Здесь мы хотим осветить expandCaptionSpan идентификатор:

 function Shine(textElement) {
    textElement.classList.remove("shine");
    setTimeout(() => textElement.classList.add("shine"), 20);
    textElement.addEventListener("webkitAnimationEnd", shineEnd);
    function shineEnd(e) {
       if (e.animationName === 'shine') {
           //textElement.classList.remove("shine");
           textElement.removeEventListener("webkitAnimationEnd", shineEnd);
       } 
    } 
}


setTimeout(() => {
    const expandCaption = document.querySelector("#expandCaptionSpan");
    Shine(expandCaption);
}, 2500); 
 .expandCaption {
  position: relative;
  font-family: "Open Sans Semibold", sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
  text-align: center;
  width: 100%;
  font-size: 4vw;
  color: #ff0000; 
  margin: 0 auto;
  opacity: 1; 
  top: 0vh;
  transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}

.arrow {
  color: #ff9900;
  font-size: 2vw;
}

.arrow-samll {
    color: #ff4646;
    font-size: 1.5vw;
}

.left-arrow {
  padding-right: 7vw;
  transition: 1s ease-in-out;
}

.right-arrow {
  padding-left: 7vw;
}



.shine {
  background-color: currentColor;
  background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-position: -100%, 0%;
  background-repeat: no-repeat, repeat;
  background-size: 60%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: shine 4s ease-out 1 forwards;
}

@keyframes shine {
  from { background-position: -100%, 0%; }
  to { background-position: 200%, 0%; }
} 
 <div class="expand-caption-container">
        <p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
    <span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
    </div>

Как я могу исправить второй пример? Чего мне не хватает?

Ответ №1:

Кажется, что ваш JS такой же, а CSS — нет. Я обнаружил, что text-shadow это вызывает проблему. Просто замените его на filter , как это сделано в вашем первом примере, и это работает. Похоже, проблема вызвана системой рендеринга.

 function Shine(textElement) {
    textElement.classList.remove("shine");
    setTimeout(() => textElement.classList.add("shine"), 20);
    textElement.addEventListener("webkitAnimationEnd", shineEnd);
    function shineEnd(e) {
       if (e.animationName === 'shine') {
           //textElement.classList.remove("shine");
           textElement.removeEventListener("webkitAnimationEnd", shineEnd);
       } 
    } 
}


setTimeout(() => {
    const expandCaption = document.querySelector("#expandCaptionSpan");
    Shine(expandCaption);
}, 2500); 
 .expandCaption {
  position: relative;
  font-family: "Open Sans Semibold", sans-serif;
  /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);*/
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 1));
  text-align: center;
  width: 100%;
  font-size: 4vw;
  color: #ff0000; 
  margin: 0 auto;
  opacity: 1; 
  top: 0vh;
  transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}

.arrow {
  color: #ff9900;
  font-size: 2vw;
}

.arrow-samll {
    color: #ff4646;
    font-size: 1.5vw;
}

.left-arrow {
  padding-right: 7vw;
  transition: 1s ease-in-out;
}

.right-arrow {
  padding-left: 7vw;
}

.shine {
  background-color: currentColor;
  background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-position: -100%, 0%;
  background-repeat: no-repeat, repeat;
  background-size: 60%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: shine 4s ease-out 1 forwards;
}

@keyframes shine {
  from { background-position: -100%, 0%; }
  to { background-position: 200%, 0%; }
} 
 <div class="expand-caption-container">
        <p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
    <span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
    </div>