2
votes

Comment rendre la durée de l'animation dynamique en fonction d'une valeur javascript

J'ai actuellement ce code dans le css où il se transforme d'une couleur à une autre mais je veux rendre la durée dynamique en fonction de certaines valeurs en javascript au lieu de l'avoir une valeur fixe.

Quelles sont les solutions dont je dispose pour y parvenir? Voici mon CSS actuel qui le transforme

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

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; }
}

javascript css

1 commentaires

en rapport: stackoverflow.com/q/49750473/8620333

3 Réponses :

1
votes

J'utiliserais des variables CSS ... principalement parce qu'elles sont géniales et faciles à utiliser.

<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>

0 commentaires

0
votes

Que diriez-vous d'utiliser des variables CSS. Les variables peuvent être modifiées par JS.

<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>

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; }
}

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

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

0 commentaires

2
votes

Vous pouvez également utiliser la propriété animationDuration pour définir la durée de l'animation.

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

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; }
}

(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);
  }
})();

0 commentaires