欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

《ReactJS》读书笔记十三_html/css_WEB-ITnose

程序员文章站 2022-04-01 21:01:43
...

动画

动画可以让用户体验变得更加流场与自然,在 React 中如何使用动画呢?React 的 TransitionGroup插件配合 CSS3 可以让我们在项目中整合动画效果变得易如反掌。

在 React 中动画是一种偏声明式的方法来实现的, TransitionGroup会在合适的渲染及冲渲染时间点有策略地添加和移除元素的 class,以此来简化将 CSS 动画应用于渐变的过程。也就是说,我们需要做的就是给这些 class写上合适的动画效果。

间隔渲染以牺牲性能为代价提供了更多的扩展性和可控性。这种方法需要更多次的渲染,但同时也允许你为 CSS 之外的内容(比如滚动条位置及 Canvas绘图)添加动画。

CSS渐变组

看一下我们的示例程序—问卷制作工具—是如何在问卷编辑器中渲染问题列表的。

	{questions}

ReactCSSTransitionGroup是一款插件,它在文件最顶部通过:

var ReactCSSTransitionGroup = React.addons.ReactCSSTransitionGroup;

语句被引人。它会自动在合适的时候处理组件的重渲染,同时根据当前的渐变状态调整渐变组的 class以便实现组件样式的改变。

给渐变 class 添加样式

按照惯例,为元素添加 transitionName="question"意味着给它添加了 4 个 class: question-enter, question-enter-active, question-leave及 question-leave-active。当子组件进入或退出 ReactCSSTransitionGroup时, CSSTransitionGroup插件会自动添加或移除这些 class。

下面是问卷编辑器中使用到的渐变样式:

.survey-editor .question-enter{	transform: scale(1.2);	transition: transform o.2s cubic-bezier(.97, .84, .5, 1.21);}.survey-editor .question-enter-active{	transform:scale(1);}.survey-editor .question-leave{	transform: translateY(o);	opacity: 0;	transition: opacity 1.2s, transform 1s cubic-bezier(5z, -0.25, .52, .95);}.survey-editor .question-leave-active{	opacity: 0;	transform: translateY(-100%);}

注意这些 .survey-editor选择器并不是 ReactCSSTransitionGroup需要的,它们只是简单地用来确保这些样式只会在编辑器里生效。

渐变生命周期

question-enter与 question-enter-active的区别在于, question-enter这个 class是组件被添加到渐变组后即刻添加上的,而 question-enter-active则是在下一轮渲染时添加的。这样的设计让你能轻松地定义渐变开始时的样式、结束时的样式以及如何进行渐变。

举个例子,当问卷编辑器中的问题被添加到列表时,它们首先被用 scale(1.2)放大,然后渐变到正常的 scale(1)状态,总共耗时 0.2 秒。这就创造出了一种你看到的跳出来的效果。

默认情况下,渐变组同时启用了进入和退出的动画,你可以通过给组件添加 transitionEnter = {false}或 transitionLeave = {false}属性来禁用其中一个或全部禁用。除了可以控制选择哪些动画效果外,我们还能根据一个可配置的值在特定的情况下禁用动画,像这样:

	{questions}