翻译 react-transition-group 之 CSSTransition

最新推荐文章于 2024-04-03 09:45:00 发布

twinkle||cll

最新推荐文章于 2024-04-03 09:45:00 发布

阅读量364

点赞数

分类专栏： react 翻译

原文链接：https://reactcommunity.org/react-transition-group/css-transition

版权

react 同时被 2 个专栏收录

46 篇文章 2 订阅

订阅专栏

翻译

8 篇文章 0 订阅

订阅专栏

react-transition-group 翻译系列

当前模块原文地址：https://reactcommunity.org/react-transition-group/css-transition
react-transition-group 之 Transition
react-transition-group 之 CSSTransition
react-transition-group 之 SwitchTransition
react-transition-group 之 TransitionGroup

CSSTransition组件的灵感来源ng-animate（详情）库,如果你正在使用CSS来实现过渡或者动画可以使用该组件。CSSTransition组件是基于 Transition组件来封装的，因此，该组件继承了Transition（详情)组件的所有属性。

A transition component inspired by the excellent ng-animate library, you should use it if you’re using CSS transitions or animations. It’s built upon the Transition component, so it inherits all of its props.

CSSTransition组件在appear（首次加载）, enter(进入阶段), 和exit（退出阶段）的时候会应用一对相应的类名。所有阶段的第一帧的类名都在这些阶段本身，然后下一帧使用的类名是阶段本身加上-active(appear-active, enter-active, exit-active)。在过渡结束后，把active换成done来持久应用

CSSTransition applies a pair of class names during the appear, enter, and exit states of the transition. The first class is applied and then a second *-active class in order to activate the CSS transition. After the transition, matching *-done class names are applied to persist the transition state.

function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <CSSTransition in={inProp} timeout={200} classNames="my-node">
        <div>
          {"I'll receive my-node-* classes"}
        </div>
      </CSSTransition>
      <button type="button" onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}

当 in属性被设置成 true的时候，子组件第一时间添加一个类名 example-enter, 然后在下一帧将会把example-enter-active 添加到子组件的类名中。CSSTransition组件会强制**回流（重新布局）**在添加example-enter-active类名之前。这是一个很重要的技巧，因为它允许我们在example-enter和example-enter-active类名之间过渡，即使他们会被立马的一个接一个的添加到子组件中：最值得我们注意的是，它可以尽可能的使我们去设置动画样式。

When the in prop is set to true, the child component will first receive the class example-enter, then the example-enter-active will be added in the next tick. CSSTransition forces a reflow between before adding the example-enter-active. This is an important trick because it allows us to transition between example-enter and example-enter-active even though they were added immediately one after another. Most notably, this is what makes it possible for us to animate appearance.

.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

*-active 类名是用于设置你想要的动画效果，因此对于过渡动画的类名是非常重要的，否则过渡动画可能不能展示照预期的效果！当过渡动画是相同可能不是很明显，例如：当*-enter-active 和 *-exit 类名相同时候，就像下面的例子，但是如果在复杂动画中会变得更加明显，案例查看 example

*-active classes represent which styles you want to animate to, so it’s important to add transition declaration only to them, otherwise transitions might not behave as intended! This might not be obvious when the transitions are symmetrical, i.e. when *-enter-active is the same as *-exit, like in the example above (minus transition), but it becomes apparent in more complex transitions.

注意： 如果你正在使用 appear 属性，确保设置 .appear-* 类名

Note: If you’re using the appear prop, make sure to define styles for .appear-* classes as well.

Props

接收Transition组件所有属性，并且附加说明

Accepts all props from unless otherwise noted .

classNames

动画类名将会被应用给组件当它appears, enters, exits 或者已经完成过渡。赋值给classNames一个字符串将会作为每一个阶段的前缀名称，例如： classNames="fade" 结果：

The animation classNames applied to the component as it appears, enters, exits or has finished the transition. A single name can be provided, which will be suffixed for each stage, e.g. classNames=“fade” applies:

fade-appear, fade-appear-active, fade-appear-done
fade-enter, fade-enter-active, fade-enter-done
fade-exit, fade-exit-active, fade-exit-done

有关如何应用这些类的一些详细信息：

它们与子组件上已经定义的样式相结合，因此如果要添加一些基本样式，可以使用类名，而不必担心它会被重写
如果组件以in={false}属性来进行过渡挂载，没有任何类名被应用组件。你可能期待需要*-exit-done类名，但是如果你仔细想一想，组件没有完成exiting(退出中)是不能进入entered(完成进入)状态
fade-appear-done 和 fade-enter-done类名都会被应用到组件。它允许你自定义不同的行为在组件初appearing始化完成或者常规entering进入已经完成，使用类似的选择器.fade-enter-done:not(.fade-appear-done)。例如：当DOM元素初始化时，你可以使用Animate.css来实现一些非常绚丽的动画。否则，您可以简单地使用fade-enter-done来定义这两种情况

A few details to note about how these classes are applied:

They are joined with the ones that are already defined on the child component, so if you want to add some base styles, you can use className without worrying that it will be overridden.
If the transition component mounts with in={false}, no classes are applied yet. You might be expecting *-exit-done, but if you think about it, a component cannot finish exiting if it hasn’t entered yet.
fade-appear-done and fade-enter-done will both be applied. This allows you to define different behavior for when appearing is done and when regular entering is done, using selectors like .fade-enter-done:not(.fade-appear-done). For example, you could apply an epic entrance animation when element first appears in the DOM using Animate.css. Otherwise you can simply use fade-enter-done for defining both cases.

每个单独的类名也可以单独指定，如:

Each individual classNames can also be specified independently like:

classNames={{
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 appearDone: 'my-done-appear',
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter',
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit',
}}

或者如果你想使用CSS 模块化来设置类名

If you want to set these classes using CSS Modules:

import styles from './styles.css';

你可能想要在你的CSS文件使用大驼峰命名法，这样就可以简单的分散它们而不是直接的一个一个列出来

you might want to use camelCase in your CSS file, that way could simply spread them instead of listing them one by one:

classNames={{ ...styles }}

type: string | { appear?: string, appearActive?: string, appearDone?: string, enter?: string, enterActive?: string, enterDone?: string, exit?: string, exitActive?: string, exitDone?: string, }
default: ''