如何在 react.js 中正确制作动画/过渡答案

【问题标题】：How to properly make animation/transition in react.js如何在 react.js 中正确制作动画/过渡
【发布时间】：2021-04-29 01:13:32
【问题描述】：

我想通过 onClick 事件平滑地调整 DIV 的大小。但是过渡不起作用。 onClick 只是改变样式，没有动画。

App.js

import React, { useState } from 'react'
import './App.scss';

function App() {
  const [clicked, setClicked] = useState(-1)

  return (
    <div 
      className={clicked === -1 ? "app" : "app__clicked"} 
      onClick={() => setClicked(0)}>
        div clicked {clicked}
    </div>
  );
}

export default App;

App.scss

.app {
  background-color: red;
  transition: width 3s;

  &__clicked {
    background-color: blue;
    width: 100px;
  }
}

我认为我在使用 SCSS 时做错了什么。

【问题讨论】：

我在你的 scss 中的任何地方都看不到过渡或动画
过渡：宽度3s；
它不在你的 scss 中，所以不算数。
你没有在 App.scss 中看到它吗？ .app { 背景颜色：红色；过渡：宽度 3s； &__clicked { 背景颜色：蓝色；宽度：100px； } }
您需要在 .app 上设置一个宽度，例如 100% 或自动以外的其他值。见这里：codesandbox.io/s/xenodochial-water-lyogy

标签： javascript css reactjs sass

【解决方案1】：

正如here 所见，您的 SASS 规则将产生两个不同的 css 类，当您将 className 属性分配给您的 div 时，您可以在它们之间切换。

第二类是app__clicked，它没有transition 属性，这就是转换不起作用的原因。它也不起作用，因为如 cmets 中所示，div 上没有初始 width，因此之间没有任何转换。通过将transition 属性移动到app_clicked 类并在初始状态下将width 设置为100%，您将获得一个工作示例。

作为手动进行转换时的建议，使用具有transition 属性集的基类，然后通过其他类（或与style 内联）切换其他状态，以确保元素始终具有transition 属性集。像这样：

<div className={ `app ${clicked === -1 ? "before" : "after"}`}>
    div clicked {clicked}
</div>

或

<div className={ "app" } style={{"width": clicked === -1 ? "100%" : "100px"}}>
    div clicked {clicked}
</div>

最后，您可能想看看react-transition-group，其中显示了带有 React 组件的转换。但是，您可能会认为这并没有带来任何新内容，而且过于冗长。但很高兴知道它可能有它的用例。

这是一个包含上述所有示例的沙盒和一个带有来自react-transition-group 的CSSTransition 组件的示例：Sandbox

【讨论】：