尝试使用React在div的出现和消失上添加动画

Question

让我给你解释一下这个场景，

• 我有3个链接/切换按钮(链接,链接2,链接3)和3个Div (Div 1, Div 2 &Div 3)。

我正在尝试添加动画到DIVS，

• 当我点击上面的链接1时，Div 1必须出现在中间(动画:渐入淡出)。
同样，当我点击链接3，然后Div 1和Div 3应该出现(动画:渐入渐出)。当我点击链接2时，Div 1和Div 2应该让位为Div 2(动画:渐入淡出)移动到各自的。

所有的div必须居中

• 如果我重新点击链接2，那么Div 2应该会移动而消失向Y方向(动画:淡出)，和Div 1和Div 3

请帮助我这个，挣扎了这么多天。提前谢谢你。参考这张图片来更好地理解!

Answer 1

您可以尝试这样做:https://codepen.io/MSanbira/pen/wvmKqNe

CSS部分:

.div-section {
position: relative;
--total: 3;
}
.div-section > div {
--size: 200px;
--gap: 24px;
position: absolute;
top: 0;
left: calc(
50% - var(--size) / 2 - 
(var(--num-selected) - var(--place) * 2 + 1) * (var(--size) / 2 + var(--gap) / 2)
);
height: var(--size);
width: var(--size);
background: pink;
display: flex;
align-items: center;
justify-content: center;
transition: 1s;
}
.div-section > div:not([data-selected="true"]) {
top: 250px;
left: calc(
50% - var(--size) / 2 - 
(var(--total) - var(--place) * 2 + 1) * var(--size) / 4
);
opacity: 0;
}

Answer 2

我一直在HTML中使用WOW js，但还没有在React中探索过

试试wow jshttps://www.npmjs.com/package/react-wow