Как сделать динамическую продолжительность анимации в соответствии со значением javascript

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

Каковы некоторые решения, которые я должен достичь? Вот мой текущий CSS, который его преобразует

ul li.transform a { 
  color: red;
  -webkit-animation-name: transform;
  -webkit-animation-duration: 60s;
  -webkit-animation-fill-mode: forwards;
  animation-name: transform;
  animation-duration: 60s;
  animation-fill-mode: forwards; 
}

@-webkit-keyframes transform{
  from { color: red; }
  to { color: green; }
}

@keyframes transform {
  from { color: red; }
  to { color: green; }
}

<ul>
  <li class = "transform">
    <a href = "#">link</a>
  </li>
</ul>

связанные: stackoverflow.com/q/49750473/8620333

— 10.04.2019 21:31

javascript css

10.04.2019 19:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

673

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я бы использовал переменные CSS... в основном потому, что они классные и простые в использовании.

<style>
  :root {
    --li-transform-animation-duration: 60s;
  }

ul li.transform a { 
  color: red;
  -webkit-animation-name: transform;
  -webkit-animation-duration: var(-li-transform-animation-duration);
  -webkit-animation-fill-mode: forwards;
  animation-name: transform;
  animation-duration: var(-li-transform-animation-duration);
  animation-fill-mode: forwards; 
}
</style>



<script>
  let root = document.documentElement;

  root.style.setProperty('--li-transform-animation-duration', '40s');
</script>

10.04.2019 20:11

Как насчет использования переменных CSS. Переменные можно изменить с помощью JS.

const transforms = document.getElementsByClassName('transform');

transforms[3].querySelector('a').style.setProperty('--transform-duration', '500ms')

ul li.transform a { 
--transform-duration: 60s; /* Default time */
  color: red;
  -webkit-animation-name: transform;
  -webkit-animation-duration: var(--transform-duration);
  -webkit-animation-fill-mode: forwards;
  animation-name: transform;
  animation-duration: var(--transform-duration);
  animation-fill-mode: forwards; 
}

@-webkit-keyframes transform{
  from { color: red; }
  to { color: green; }
}

@keyframes transform {
  from { color: red; }
  to { color: green; }
}

<ul>
  <li class = "transform">
    <a href = "#">link</a>
  </li>
  <li class = "transform">
    <a href = "#" style = "--transform-duration:5s">link1</a>
  </li>
  <li class = "transform">
    <a href = "#" style = "--transform-duration:1s">link2</a>
  </li>
  <li class = "transform">
    <a href = "#">link3 is 60s but reset to .5s</a>
  </li>
</ul>

10.04.2019 22:55

Ответ принят как подходящий

Вы также можете использовать свойство animationDuration для определения продолжительности анимации.

(function() {
  let time = "3s",
      set_duration = () => {
        document.getElementById("link").style.WebkitAnimationDuration = time;
        document.getElementById("link").style.animationDuration = time;
      };
    
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
      set_duration();
  } else {
      document.addEventListener('DOMContentLoaded', set_duration);
  }
})();

ul li.transform a { 
    color: red;
    -webkit-animation-name: transform;
    -webkit-animation-fill-mode: forwards;
    animation-name: transform;
    animation-fill-mode: forwards; 
}

@-webkit-keyframes transform {
    from { color: red; }
    to { color: green; }
}

@keyframes transform {
    from { color: red; }
    to { color: green; }
}

<ul>
    <li class = "transform">
        <a href = "#" id = "link">link</a>
    </li>
</ul>

10.04.2019 23:37

Другие вопросы по теме

Как открыть форму вверх при наведении или клике?

Как установить фоновое изображение?

Как выровнять весь текст в Rmd с помощью bookdown::gitbook в качестве вывода

Преобразование нескольких столбцов на рабочем столе в 2 столбца в мобильном представлении

Webpack не включает css в сборку HTML

Количество классов JQuery в HTML

Как сбросить переменную CSS (она же настраиваемые свойства) и использовать резервную?

Наведите всплывающую подсказку

Обрезать псевдоэлемент внутри заполненной области

React делает бессмысленным div, нарушая мой стиль flexbox

Как сделать динамическую продолжительность анимации в соответствии со значением javascript

Ответы 3

Другие вопросы по теме

Похожие вопросы