@4rk/css-transition 中文文档教程

Question

CSSTransition

为 CSS 过渡的每个阶段应用一个 CSS 类。

这基本上是 react-transition-group 的无反应剽窃。

将 CSS 从 display: none; 转换为 display: whatever; 非常有用。

Demo

有一个简单的用法演示，可以按如下方式运行：

yarn
yarn start

Usage

这个库的基本思想是，为了使用 JavaScript 控制 CSS 转换，您必须将其视为一个三阶段过程：

1. Start:
   • Set prerequisites for the animation, e.g. set display: block; and transition: all 0.3s ease;
2. Active:
   • One requestAnimationFrame after start
   • Change transitioning properties, e.g. set opacity: 1;
3. Done:
   • After transitionend or a timeout
   • Make transition changes permanent, this means usually setting the same properties as during active stage
   • During exit, this would be the place to set display back to none.

有关代码示例，请看看演示。

Tricks

• Apply pointer-events: none; during .exit and .exit-active to prevent user interaction during transition
• How to cope with the timeout warning:
  1. Make sure that a transition is happening on the element specified during instantiation, e.g. it is not a parent element but the direct element on which the transitions are happening. If not, create separate CSSTransition instances for each element.
  2. Make sure that there is actually a transition. The instance is waiting for the first transitionend event.
  3. Check whether your transition takes less time than the configured timeout which is by default 500ms. If not, increase the timeout.

Creating a release

需要完成某些步骤才能创建新版本：

1. Decide on a semver version number
2. Start a new release using git flow release start [version number]
3. Update the package.json version
4. Run yarn run release
5. Commit changes: git commit -a -m "Prepare release [version number]"
6. Finish release using git flow release finish
7. Push all changes: git push origin --all && git push origin --tags

License

请参阅 LICENSE