@4rk/css-transition 中文文档教程
CSSTransition
为 CSS 过渡的每个阶段应用一个 CSS 类。
这基本上是 react-transition-group 的无反应剽窃。
将 CSS 从 display: none; 转换为 display: whatever; 非常有用。
Demo
有一个简单的用法演示，可以按如下方式运行：
yarn
yarn start
Usage
这个库的基本思想是，为了使用 JavaScript 控制 CSS 转换，您必须将其视为一个三阶段过程：
- Start:
- Set prerequisites for the animation, e.g. set
display: block;andtransition: all 0.3s ease;
- Set prerequisites for the animation, e.g. set
- Active:
- One
requestAnimationFrameafter start - Change transitioning properties, e.g. set
opacity: 1;
- One
- Done:
- After
transitionendor 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 setdisplayback tonone.
- After
有关代码示例，请看看演示。
Tricks
- Apply
pointer-events: none;during.exitand.exit-activeto prevent user interaction during transition - How to cope with the timeout warning:
- 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
CSSTransitioninstances for each element. - Make sure that there is actually a transition. The instance is waiting for the first
transitionendevent. - Check whether your transition takes less time than the configured timeout which is by default 500ms. If not, increase the timeout.
- 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
Creating a release
需要完成某些步骤才能创建新版本：
- Decide on a semver version number
- Start a new release using
git flow release start [version number] - Update the
package.jsonversion - Run
yarn run release - Commit changes:
git commit -a -m "Prepare release [version number]" - Finish release using
git flow release finish - Push all changes:
git push origin --all && git push origin --tags
License
请参阅 LICENSE
CSSTransition
Apply a CSS class for each stage of a CSS transition.
This is basically a react-free rip-off of react-transition-group.
It is super useful to make CSS transitions from display: none; to display: whatever;.
Demo
There is a simple usage demo which can be run as follows:
yarn
yarn start
Usage
The basic idea of this library is that in order to control a CSS transition using JavaScript, you have to think of it as a three-staged process:
- Start:
- Set prerequisites for the animation, e.g. set
display: block;andtransition: all 0.3s ease;
- Set prerequisites for the animation, e.g. set
- Active:
- One
requestAnimationFrameafter start - Change transitioning properties, e.g. set
opacity: 1;
- One
- Done:
- After
transitionendor 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 setdisplayback tonone.
- After
For a code example, please take a look at the demo.
Tricks
- Apply
pointer-events: none;during.exitand.exit-activeto prevent user interaction during transition - How to cope with the timeout warning:
- 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
CSSTransitioninstances for each element. - Make sure that there is actually a transition. The instance is waiting for the first
transitionendevent. - Check whether your transition takes less time than the configured timeout which is by default 500ms. If not, increase the timeout.
- 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
Creating a release
Certain steps need to be done in order to create a new release:
- Decide on a semver version number
- Start a new release using
git flow release start [version number] - Update the
package.jsonversion - Run
yarn run release - Commit changes:
git commit -a -m "Prepare release [version number]" - Finish release using
git flow release finish - Push all changes:
git push origin --all && git push origin --tags
License
See LICENSE
