6

I have a GUI react/redux based app. As part of the view there is a "indicator" react component which I wish to blink, and the blinking is done with a CSS3 animation (animation frames). The indicator.blink() member function of the react component is called to make the indicator blink (it basically removes the blink class from the DOM element, then adds it again 1ms later, as a hack to get around the fact that there is no "restart" api for a CSS3 animation).

Upon certain actions occurring in the redux framework (they can be thunks if needed), I wish to call this blink() function in the react view. How best to do this?

It doesn't feel right to have the redux action modify the app state, and then the indicator element bind to one of the state variables as a prop, since it's not really a state, but an instantaneous event. But I know of no other way to get a redux action to change a react component.

4

3 回答 3

2

假设您想使用该blink事物来显示某事物何时增加，您可以简单地在您的状态中保留一个计数器，并在您的组件的内部状态中保留之前的值。当它改变时，blink并保存新值。

换句话说，从您关心的状态变化中获取您想要的事件信息。

将内部状态用于这种瞬态行为是完全可以的，这就是它的用途。

于 2015-10-08T05:54:15.187 回答
1

想象一下 CSS 转换是实现细节，并且您不会在组件上公开方法。（无论如何，您通常不应该这样做。）

仅靠道具如何驱动？我会想象一个 boolean prop isBlinking。如果你愿意，这是你可以保持在 Redux 状态的。有一个动作创建者在几毫秒后调度START_BLINK和。STOP_BLINK

或者您可以避免为此使用 Redux 并从父组件强制调用方法。

于 2015-10-08T06:52:32.457 回答
0

CSS 动画中没有“重新启动”，但您可以将迭代计数指定为infinite，这似乎可以在不涉及 Redux 的情况下解决您的问题，除了可能根据您的需要打开或关闭 .blinking 类眨眼与否。

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1}
  100% { opacity: 0; }
}
.blinking{
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count:infinite;
}
于 2015-10-31T10:13:07.620 回答