Question

人们可以使用refs来控制DOM元素，如下所示：

handleContactMouseEnter = e => {
    e.stopPropagation();
    let ref = //Get the Ref;
    let div = this.refs[ref];
    div.className = "text-left";
  };

问题在于这些更改非常突然发生。我想知道是否有一种简单的方法可以向这样触发的更改中添加一些动画。例如，上述代码更改某些文本的对齐方式。在应用此更改时，我能否使文本看起来像在移动？

Answer 1

“ text-right”看起来像一个引导类，这就是您所使用的吗？如果没有，请张贴它指定的样式。如果是引导程序，则“ text-right”将更改text-align属性，该属性是无法设置动画的属性，请参见例如：https://www.w3.org/TR/css-transitions-1/#animatable-properties

但是，正如@ rags2riches所说，可以通过创建和应用其他样式来实现类似的效果，例如：

.text-box {
  transition: transform 0.2s;
}

.text-box--left {
  transform: translate(-200px);
}

通过这种方式，您的代码示例可以更改为：

handleContactMouseEnter = e => {
    e.stopPropagation();
    let ref = //Get the Ref;
    let div = this.refs[ref];
    div.className = "text-box--left";
  };

我希望能有所帮助。如果没有，请分享有关您的特定设置以及正在使用的内容以及希望实现的更多详细信息。

如何为JavaScript触发的CSS更改设置动画？

1 个答案: