1
votes

Comment changer dynamiquement le nom de l'animation en CSS

J'essaye de changer le nom de l'animation dans (loader - text: after) CSS avec l'aide de js ou Jquery mais je ne peux changer que (contenu) en CSS pas capable de changer le nom de l'animation J'ai essayé:

code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='loader--text'></div>

.loader--text:after {
  content: attr(data-content);
  font-weight: bold;
  animation-name: attr(data-animation);
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes connecting-text {
  0% {
    content: "Connecting Printer";
  }
  25% {
    content: "Connecting Printer.";
  }
  50% {
    content: "Connecting Printer..";
  }
  75% {
    content: "Connecting Printer...";
  }
}

@keyframes fetching-text {
  0% {
    content: "Fetching Story";
  }
  25% {
    content: "Fetching Story.";
  }
  50% {
    content: "Fetching Story..";
  }
  75% {
    content: "Fetching Story...";
  }
}

$('.loader--text').attr("data-content", "Connection Printer"); // It's Working
$('.loader--text').attr("data-animation", "connecting-text"); // But It's Not working

javascript jquery css

1 commentaires

pourquoi essayez-vous de changer css avec .attr ()?

3 Réponses :

1
votes

vous pouvez utiliser attr () en css pour ne transmettre que des valeurs de chaîne. animation-name n'est pas une valeur de chaîne

plus d'infos: https://css-tricks.com/css-attr-function-got-nothin-custom-properties/

vous pouvez changer l'animation en changeant la propriété style.animationName de l'élément.

<div id="square" data-animate="first">
  
</div>

<button id="test">TOGGLE</button>

#square{
  background: red;
  padding: 50px;
  width:50px;
  height:50px;
/*   animation-name: attr(data-animate); */
  animation-name: first;
  position:absolute;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes first {
  0% {
    left: 0
  }
  
  100% {
    left: 600px;
  }
}
@keyframes second {
  0% {
    top: 0
  }
  
  100% {
    top: 600px;
  }
}

let state = 1;
const square = document.getElementById('square')
document.getElementById('test').addEventListener("click", ()=>{
  if(state == 1){
    square.style.animationName = "second"
    state = 2
  } else{
        square.style.animationName = "first"
    state = 1
  }
})

0 commentaires

3
votes

Après quelques recherches, vous ne pouvez modifier le style du contenu qu'avec la méthode attr . vous pouvez adopter une approche différente de la tâche, comme transformer l'animation : after uniquement sur les points et utiliser innerHTML pour le dom lui-même.

exemple:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='loader--text' onclick="changeText()"></div>

.loader--text {
  cursor: pointer;
}

.loader--text:after {
  content: "";
  font-weight: bold;
  animation-name: dots;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}

const loader = document.querySelector(".loader--text");

loader.innerHTML = "Connecting Printer";

function changeText() {
  loader.innerHTML = "Fetching Story";
}

0 commentaires

1
votes

Vous ne pouvez utiliser attr () que pour l'attribut content dans ce cas.

Je conseillerais de se débarrasser de jQuery (pas de haine, j'ai utilisé aimer l'utiliser), mais comme vous l'utilisez déjà, vous pouvez changer le nom de l'animation comme ceci:

.loader--text.one:after{animation: ...}
.loader--text.two:after{animation: ...}

$('.loader--text').removeClass('one').addClass('two');

Ceci bien sûr ne s'applique pas aux pseudo éléments (tels comme: après).

Quoi qu'il en soit, je pense qu'il est beaucoup plus facile de créer deux classes séparées (chacune d'elles applique une animation différente) et ensuite de simplement basculer les classes, je pense que c'est beaucoup plus facile à utiliser. p>

$('div').css('animation-name', 'anim2');

0 commentaires