Question

我有一个模态，完整的代码：
https://codesandbox.io/s/8yxmz73l1j
我希望能够为这个模态设置动画，类似于自举模式，上下翻译，淡入淡出。因此，当我单击var resourcesObject = [ { "author" : "photographer1", "images1": ['cat1','cat2','cat3'] }, { "author" : "photographer2", "images2": ['dog1', 'dog2', 'dog3', 'dog4'] } ]; function randomize(n){ return Math.floor(Math.random() * n); } var n = resourcesObject.length; var randomIndex = randomize(n); var selectedObj = resourcesObject[randomIndex]['images' + (randomIndex + 1)]; var randomImg = selectedObj[(Math.floor(Math.random() * selectedObj.length))]; console.log(randomImg);按钮时，它会在模态中淡出，当我单击关闭模态的按钮时，它会淡出它。我试图使用React Transition但无济于事。我怎样才能实现我的目标？

Answer 1

不使用javascript而是使用简单的CSS，可以使用keyframe animations这样做：

@keyframes modalFade {
  from {transform: translateY(-50%);opacity: 0;}
  to {transform: translateY(0);opacity: 1;}
}

.modal {
  animation-name: modalFade;
  animation-duration: .3s;
}

在/components/Modal/index.css这里，你只能在模态显示中获得动画！要为关闭操作设置动画，您需要将动画方向设置为反向，然后卸载该组件。

单击时反映模态动画

1 个答案: