时间戳

首页 > 解决方案 > 如何在 react.js 中正确制作动画/过渡

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

问题描述

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

应用程序.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;

应用程序.scss

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

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

我想我在 SCSS 上做错了什么。

标签： javascriptcssreactjssass

解决方案

从这里可以看出，您的 SASS 规则将产生两个不同的 css 类，您在将className道具分配给您的div.

第二类是app__clicked，它没有transition属性，这就是转换不起作用的原因。它也不起作用，因为正如评论中所指出的，您在width上没有首字母div，因此没有什么可以转换的。通过将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-groupReact 组件的转换显示在哪里。但是，您可能会认为这并没有带来任何新内容，而且过于冗长。但很高兴知道它可能有它的用例。

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

推荐阅读