【场景】
@keyframes t-tree-toggle {
0% {
opacity: 0;
height: 0;
}
50% {
opacity: 0;
height: 40px;
}
100% {
opacity: 1;
height: 40px;
}
}
进入执行 t-tree-toggle，退出执行 t-tree-toggle reverse。
退出时，节点闪烁！
【原因分析】
动画执行完毕时，节点还未卸载。节点卸载的延迟时间差，造成了闪现效果。
【解决方案】
1、在退出动画设置的同时，手动设置退出后的样式。确保在节点卸载前，样式就已经稳定置为节点退出后的样式。从而防止闪烁。
.tree--fx {
.tree-toggle-enter-active {
animation: t-tree-toggle .3s linear;
}
.tree-toggle-exit-active {
animation: t-tree-toggle .3s reverse linear;
opacity: 0; // 防止 react-transition-group 卸载节点，页面闪烁!
height: 0; // 防止 react-transition-group 卸载节点，页面闪烁!
}
}
2、使用 animation-fill-mode
为退出动画设置 animation-fill-mode: forwards;
.tree-toggle-exit-active {
animation: t-tree-toggle .3s reverse linear;
animation-fill-mode: forwards; // 防止 react-transition-group 卸载节点，页面闪烁!
}
网友评论