react之路： react过渡动画（react-transition-group）
<p>github仓库地址：https://github.com/wanghao12345/react-book</p><p>这里主要讲解使用react-transition-group里面的CSSTransition实现动画。</p>
<p>使用CSSTransition实现动画，一共分三步：</p>
<h3>1.引用CSSTransition</h3>
<p> <span class="cnblogs_code"><span style="color: rgba(0, 128, 128, 1)">1</span> import { CSSTransition } from 'react-transition-group'</span> </p>
<h3>2.使用CSSTransition将需要动画的元素包裹起来</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> <<span style="color: rgba(0, 0, 0, 1)">CSSTransition
</span><span style="color: rgba(0, 128, 128, 1)">2</span> <span style="color: rgba(0, 0, 255, 1)">in</span>={<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.state.focused}
</span><span style="color: rgba(0, 128, 128, 1)">3</span> timeout={200<span style="color: rgba(0, 0, 0, 1)">}
</span><span style="color: rgba(0, 128, 128, 1)">4</span> classNames='slide'
<span style="color: rgba(0, 128, 128, 1)">5</span> >
<span style="color: rgba(0, 128, 128, 1)">6</span> <span style="color: rgba(0, 0, 0, 1)"> ........
</span><span style="color: rgba(0, 128, 128, 1)">7</span></CSSTransition>
<span style="color: rgba(0, 128, 128, 1)">8</span>
<span style="color: rgba(0, 128, 128, 1)">9</span> </pre>
</div>
<p>in: 一个是否执行动画的标准，当in的值为true就开始执行入场动画，in的值为false就开始执行出场动画</p>
<p>timeout: 执行一个动画的时间</p>
<p>classNames:动画的class名称，为了描述具体动画做准备</p>
<h3>3.样式描述动画效果</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)"> 1</span> .slide-<span style="color: rgba(0, 0, 0, 1)">enter {
</span><span style="color: rgba(0, 128, 128, 1)"> 2</span> transition: all .2s ease-<span style="color: rgba(0, 0, 0, 1)">out;
</span><span style="color: rgba(0, 128, 128, 1)"> 3</span> <span style="color: rgba(0, 0, 0, 1)">}
</span><span style="color: rgba(0, 128, 128, 1)"> 4</span> .slide-enter-<span style="color: rgba(0, 0, 0, 1)">active {
</span><span style="color: rgba(0, 128, 128, 1)"> 5</span> <span style="color: rgba(0, 0, 0, 1)"> width: 240px;
</span><span style="color: rgba(0, 128, 128, 1)"> 6</span> <span style="color: rgba(0, 0, 0, 1)">}
</span><span style="color: rgba(0, 128, 128, 1)"> 7</span> .slide-<span style="color: rgba(0, 0, 0, 1)">exit {
</span><span style="color: rgba(0, 128, 128, 1)"> 8</span> transition: all .2s ease-<span style="color: rgba(0, 0, 0, 1)">out;
</span><span style="color: rgba(0, 128, 128, 1)"> 9</span> <span style="color: rgba(0, 0, 0, 1)">}
</span><span style="color: rgba(0, 128, 128, 1)">10</span> .slide-exit-<span style="color: rgba(0, 0, 0, 1)">active {
</span><span style="color: rgba(0, 128, 128, 1)">11</span> <span style="color: rgba(0, 0, 0, 1)"> width: 160px;
</span><span style="color: rgba(0, 128, 128, 1)">12</span> }</pre>
</div>
<p>.xxx-enter：入场动画过渡参数设置</p>
<p>.xxx-enter-active ：入场动画的效果</p>
<p>.xxx-exit：出场动画的过渡参数设置</p>
<p>.xxx-exit-active：出场动画的效果</p>
<p>注意：xxx为第二步定义的CSSTransition的className</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/wanghao123/p/11152005.html
頁:
[1]