React引入react-transition-group实现过渡效果

React引入react-transition-group实现过渡效果

​​文档地址​​

安装

npm install react-transition-group

该组件提供了4个组件​​Transition、CSSTransition、SwitchTransition、TransitionGroup​​​ 写法跟​​Vue ---- transition​​组件很像

这里主要介绍​​CSSTransition​​

import React, { useState } from 'react';import { CSSTransition } from 'react-transition-group'import "./style.less"const Transition = () => { const [show, setShow] = useState(true) return (

.Transition { .fade-enter { opacity: 0; } .fade-exit { opacity: 1; } .fade-enter-active { opacity: 1; transition: all 0.3s; } .fade-exit-active { opacity: 0; transition: all 0.3s }}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。