JQuery .animate () ne fonctionne pas avec ReactJS?

J'essaie de mettre en évidence une cellule lorsque l'utilisateur clique dessus en utilisant jQuery .animate ()

clickHandler: function() {

var cell = React.findDOMNode(this.refs.cell);

// $(cell).css("background-color", "blue");//THIS WORK


$(cell).animate({

  backgroundColor: "blue"

}, 1000);//THIS DOESN'T WORK

},

J'utilise aussi React.addons.CSSTransitionGroup. Peut-être qu'il y a un conflit entre jQuery .animate et it.

Merci pour toute aide.

0
Merci pour l'aide! En fait, le problème était que je n'incluais pas la couleur jQuery qui est nécessaire pour animer la couleur.
ajouté l'auteur Eric Hth, source
Je ne pense pas que ce soit REACT, jQuery a un problème avec l'animation de couleur de fond, regardez ici: jsfiddle.net/7s0ff5a8 et ici: stackoverflow.com/questions/1694295/& hellip;
ajouté l'auteur axel.michel, source

2 Réponses

Regardez cette page conseil : http://www.w3schools.com/ jquery/eff_animate.asp sous les styles de paramètres, description

TIp Les animations couleur ne sont pas incluses dans la bibliothèque jQuery principale. Si vous voulez animer une couleur, vous devez télécharger le plugin Color Animations sur jQuery.com

Vous devez télécharger et inclure le plugin animate de couleur pour le faire. Voici un lien: http://plugins.jquery.com/color/ à télécharger.

0
ajouté
Problème résolu, merci!
ajouté l'auteur Eric Hth, source
De rien!
ajouté l'auteur nada, source

Si vous n'avez pas besoin de support pour IE9, tous les autres navigateurs prennent en charge les transitions.

CSS:

.my-color-element { background-color: blue; transition: background-color .4s linear }
.my-color-element.transition { background-color: red; }

JS:

clickHandler: function() {

  var cell = React.findDOMNode(this.refs.cell);
  $(cell).addClass('transition');

},

http://caniuse.com/#search=transition

0
ajouté
Merci pour l'aide! En fait, jQuery animated fonctionne avec reactJS mais vous devez importer la couleur jQuery.
ajouté l'auteur Eric Hth, source