JQuery .animate() 不能与 ReactJS 一起使用？答案

【问题标题】：JQuery .animate() not working with ReactJS?JQuery .animate() 不能与 ReactJS 一起使用？
【发布时间】：2015-09-04 07:31:34
【问题描述】：

当用户使用 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

},

我也在使用 React.addons.CSSTransitionGroup。可能 jQuery .animate 和它有冲突。

感谢您的帮助。

【问题讨论】：

我觉得不是 REACT，jquery 的背景色动画有问题，看这里：jsfiddle.net/7s0ff5a8 和这里：stackoverflow.com/questions/1694295/…
感谢您的帮助！事实上，问题在于我没有包含动画颜色所需的 jquery 颜色。

标签： jquery reactjs

【解决方案1】：

看看这个页面提示：http://www.w3schools.com/jquery/eff_animate.asp 在参数样式下，描述

TIp 核心 jQuery 库中不包含彩色动画。如果你想要动画颜色，你需要从 jQuery.com 下载 Color Animations 插件

您必须下载并包含 color animate 插件才能执行此操作。这是一个链接：http://plugins.jquery.com/color/供下载。

【讨论】：

【解决方案2】：

如果您不需要对 IE9 的支持，所有其他浏览器都支持过渡。

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

【讨论】：

感谢您的帮助！事实上 jQuery 动画确实适用于 reactJS，但你需要导入 jQuery 颜色。