实现一个带有动效的 React 弹窗组件
<p>我们在写一些 UI 组件时，若不考虑动效，就很容易实现，主要就是有无的切换（类似于 Vue 中的 v-if 属性）或者可见性的切换（类似于 Vue 中的 v-show 属性）。</p><p><img src="https://img2020.cnblogs.com/blog/443443/202106/443443-20210621140414641-1996501759.gif" alt="沉迷工作" loading="lazy"></p>
<h2 id="1-没有动效的弹窗">1. 没有动效的弹窗</h2>
<p>在 React 中，可以这样来实现：</p>
<pre><code class="language-javascript">interface ModalProps {
open: boolean;
onClose?: () => void;
children?: any;
}
const Modal = ({open. onClose, children}: ModalProps) => {
if (!open) {
return null;
}
return createPortal(<div>
<div classname="modal-content">{children}</div>
<div classname="modal-close-btn" onclick="{onClose}">x</div>
</div>, document.body);
};
</code></pre>
<p>使用方式：</p>
<pre><code class="language-javascript">const App = () => {
const = useState(false);
return (
<div classname="app">
<button onclick="{()" ==""> setOpen(true)}>show modal</button>
<modal open="{open}" onclose="{()" ==""> setOpen(false)}>
modal content
</modal>
</div>
);
};
</code></pre>
<p>我们在这里就是使用<code>open</code>属性来控制展示还是不展示，但完全没有渐变的效果。</p>
<p>若我们想实现 fade, zoom 等动画效果，还需要对此进行改造。</p>
<p><img src="https://img2020.cnblogs.com/blog/443443/202106/443443-20210621140414694-899737038.jpg" alt="今天也是开心的一天" loading="lazy"></p>
<h2 id="2-自己动手实现有动效的弹窗">2. 自己动手实现有动效的弹窗</h2>
<p>很多同学在自己实现动效时，经常是展示的时候有动效，关闭的时候没有动效。都是动效的时机没有控制好。这里我们先自己来实现一下动效的流转。</p>
<p>刚开始我实现的时候，动效只有开始状态和结束状态，需要很多的变量和逻辑来控制这个动效。</p>
<p>后来我参考了<code>react-transition-group</code>组件的实现，他是将动效拆分成了几个部分，每个部分分别进行控制。</p>
<ul>
<li>展开动效的顺序：enter -> enter-active -> enter-done；</li>
<li>关闭动效的顺序：exit -> exit-active -> exit-done；</li>
</ul>
<p>动效过程在<code>enter-active</code>和<code>exit-active</code>的过程中。</p>
<p>我们再通过一个变量 active 来控制是关闭动效是否已执行关闭，参数 open 只控制是执行展开动效还是关闭动效。</p>
<p>当 open 和 active 都为 false 时，才销毁弹窗。</p>
<pre><code class="language-javascript">const Modal = ({ open, children, onClose }) => {
const = useState(false); // 弹窗的存在周期
if (!open && !active) {
return null;
}
return ReactDOM.createPortal(
<div classname="modal">
<div classname="modal-content">{children}</div>
<div classname="modal-close-btn" onclick="{onClose}">
x
</div>
</div>,
document.body,
);
};
</code></pre>
<p>这里我们接着添加动效过程的变化：</p>
<pre><code class="language-javascript">const = useState(''); // 动效的class
// transition执行完毕的监听函数
const onTransitionEnd = () => {
// 当open为rue时，则结束状态为'enter-done'
// 当open未false时，则结束状态为'exit-done'
setAniClassName(open ? 'enter-done' : 'exit-done');
// 若open为false，则动画结束时，弹窗的生命周期结束
if (!open) {
setActive(false);
}
};
useEffect(() => {
if (open) {
setActive(true);
setAniClassName('enter');
// setTimeout用来切换class，让transition动起来
setTimeout(() => {
setAniClassName('enter-active');
});
} else {
setAniClassName('exit');
setTimeout(() => {
setAniClassName('exit-active');
});
}
}, );
</code></pre>
<p>Modal 组件完整的代码如下：</p>
<pre><code class="language-javascript">const Modal = ({ open, children, onClose }) => {
const = useState(false); // 弹窗的存在周期
const = useState(''); // 动效的class
const onTransitionEnd = () => {
setAniClassName(open ? 'enter-done' : 'exit-done');
if (!open) {
setActive(false);
}
};
useEffect(() => {
if (open) {
setActive(true);
setAniClassName('enter');
setTimeout(() => {
setAniClassName('enter-active');
});
} else {
setAniClassName('exit');
setTimeout(() => {
setAniClassName('exit-active');
});
}
}, );
if (!open && !active) {
return null;
}
return ReactDOM.createPortal(
<div classname="{'modal" '="" +="" aniclassname}="" ontransitionend="{onTransitionEnd}">
<div classname="modal-content">{children}</div>
<div classname="modal-close-btn" onclick="{onClose}">
x
</div>
</div>,
document.body,
);
};
</code></pre>
<p>动效的流转过程已经实现了，样式也要一起写上。比如我们要实现渐隐渐现的 fade 效果：</p>
<pre><code class="language-css">.enter {
opacity: 0;
}
.enter-active {
transition: opacity 200ms ease-in-out;
opacity: 1;
}
.enter-done {
opacity: 1;
}
.exit {
opacity: 1;
}
.exit-active {
opacity: 0;
transition: opacity 200ms ease-in-out;
}
.exit-done {
opacity: 0;
}
</code></pre>
<p>如果是要实现放大缩小的 zoom 效果，修改这几个 class 就行。</p>
<p>一个带有动效的弹窗就已经实现了。</p>
<p>使用方式：</p>
<pre><code class="language-javascript">const App = () => {
const = useState(false);
return (
<div classname="app">
<button onclick="{()" ==""> setOpen(true)}>show modal</button>
<modal open="{open}" onclose="{()" ==""> setOpen(false)}>
modal content
</modal>
</div>
);
};
</code></pre>
<p>点击链接自己实现动效的 React 弹窗 demo查看效果。</p>
<p>类似地，还有 Toast 之类的，也可以这样实现。</p>
<p><img src="https://img2020.cnblogs.com/blog/443443/202106/443443-20210621140414709-1828723184.jpg" alt="哈哈哈" loading="lazy"></p>
<h2 id="3-react-transition-group">3. react-transition-group</h2>
<p>我们在实现动效的思路上借鉴了 react-transition-group 中的CSSTransition组件。<code>CSSTransition</code>已经帮我封装好了动效展开和关闭的过程，我们在实现弹窗时，可以直接使用该组件。</p>
<p>这里有一个重要的属性：<code>unmountOnExit</code>，表示在动效结束后，卸载该组件。</p>
<pre><code class="language-javascript">const Modal = ({ open, onClose }) => {
// http://reactcommunity.org/react-transition-group/css-transition/
// in属性为true/false，true为展开动效，false为关闭动效
return createPortal(
<csstransition in="{open}" timeout="{200}" unmountonexit="">
<div classname="modal">
<div classname="modal-content">{children}</div>
<div classname="modal-close-btn" onclick="{onClose}">
x
</div>
</div>
</csstransition>,
document.body,
);
};
</code></pre>
<p>在使用 CSSTransition 组件后，Modal 的动效就方便多了。</p>
<p><img src="https://img2020.cnblogs.com/blog/443443/202106/443443-20210621140414654-662816537.gif" alt="modal的动效" loading="lazy"></p>
<h2 id="4-总结">4. 总结</h2>
<p><img src="https://img2020.cnblogs.com/blog/443443/202106/443443-20210621140414608-955566078.gif" alt="帮我点个在看吧" loading="lazy"></p>
<p>至此已把待动效的 React Modal 组件实现出来了。虽然 React 中没有类似 Vue 官方定义的<code><transition></code>标签，不过我们可以自己或者借助第三方组件来实现。</p>
<p>欢迎关注我的公众号：“<strong>前端小茶馆</strong>”，</p>
<p><img src="https://img2020.cnblogs.com/blog/443443/202103/443443-20210329093702763-499977807.png" alt="前端小茶馆" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/xumengxuan/p/14912990.html
頁:
[1]