移除类名没有触发transition_React过渡动画reacttransitiongroup

React过渡动画

安装react-transition-group

可导入使用的有四个组件对象&＃xff1a;

• Transition&＃xff08;不常用&＃xff09;
• CSSTransition&＃xff08;它的属性结合css控制组件出现、消失&＃xff09;
• SwitchTransition&＃xff08;控制两个组件之间状态切换&＃xff09;
• TransitionGroup&＃xff08;当有一组组件的动画时&＃xff0c;需要使用它包裹&＃xff09;

使用CSSTransition

1】首先写css类名样式

• CSSTransition执行过程中&＃xff0c;有三个状态&＃xff1a;appear、enter、exit&＃xff1b;
• 它们有三种状态&＃xff0c;需要定义对应的CSS样式&＃xff1a;
  • 第一类&＃xff0c;开始状态&＃xff1a;对于的类是-appear、-enter、-exit&＃xff1b;
• 第二类&＃xff1a;执行动画&＃xff1a;对应的类是-appear-active、-enter-active、-exit-active&＃xff1b;
• 第三类&＃xff1a;执行结束&＃xff1a;对应的类是-appear-done、-enter-done、-exit-done&＃xff1b;

2】CSSTransition组件属性

• in&＃xff1a;触发进入或者退出状态
  • 如果添加了unmountOnExit&＃61;{true}&＃xff0c;那么该组件会在执行退出动画结束后被移除掉&＃xff1b;
• 当in为true时&＃xff0c;触发进入状态&＃xff0c;会添加-enter、-enter-acitve的class开始执行动画&＃xff0c;当动画执行结束后&＃xff0c;会移除两个class&＃xff0c;并且添加-enter-done的class&＃xff1b;
• 当in为false时&＃xff0c;触发退出状态&＃xff0c;会添加-exit、-exit-active的class开始执行动画&＃xff0c;当动画执行结束后&＃xff0c;会移除两个class&＃xff0c;并且添加-enter-done的class&＃xff1b;
• classNames&＃xff1a;动画class的名称
  • 决定了在编写css时&＃xff0c;对应的class名称&＃xff1a;比如card-enter、card-enter-active、card-enter-done&＃xff1b;

• timeout&＃xff1a;
  • 过渡动画的时间
• appear&＃xff1a;
  • 是否在初次进入添加动画&＃xff08;需要和in同时为true&＃xff09;

• 其他属性可以参考官网来学习&＃xff1a;
  • https://reactcommunity.org/react-transition-group/transition

CSSTransition对应的钩子函数&＃xff1a;主要为了检测动画的执行过程&＃xff0c;来完成一些Javascript的操作

• onEnter&＃xff1a;在进入动画之前被触发&＃xff1b;
• onEntering&＃xff1a;在应用进入动画时被触发&＃xff1b;
• onEntered&＃xff1a;在应用进入动画结束后被触发&＃xff1b;

使用SwitchTransition

SwitchTransition可以完成两个组件之间切换的炫酷动画&＃xff1a;

• 比如我们有一个按钮需要在on和off之间切换&＃xff0c;我们希望看到on先从左侧退出&＃xff0c;off再从右侧进入&＃xff1b;
• 这个动画在vue中被称之为 vue transition modes&＃xff1b;
• react-transition-group中使用SwitchTransition来实现该动画&＃xff1b;

SwitchTransition中主要有一个属性&＃xff1a;mode&＃xff0c;有两个值

• in-out&＃xff1a;表示新组件先进入&＃xff0c;旧组件再移除&＃xff1b;
• out-in&＃xff1a;表示就组件先移除&＃xff0c;新组建再进入&＃xff1b;

SwitchTransition还是需要通过CSSTransition来进行控制&＃xff0c;使用key属性来控制&＃xff08;不能使用in属性&＃xff09;

• SwitchTransition组件里面要有CSSTransition或者Transition组件&＃xff0c;不能直接包裹你想要切换的组件&＃xff1b;
• SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态&＃xff0c;取而代之的是key属性&＃xff1b;

ReactTransitionSwitch.css

使用TransitionGroup

当我们有一组动画时&＃xff0c;需要将这些CSSTransition放入到一个TransitionGroup中来完成动画&＃xff1a;

ReactTransitionGroup.css