我如何在 Elm-UI 中对鼠标进行动画处理？

Question

我希望将鼠标悬停在按钮上时进行简单擦除。我想出了使用 mouseOver 来更改悬停时的背景，但我不确定如何创建从一个背景到另一个背景的擦除。我知道 elm-simple-animation，但我对 Elm 太陌生，无法理解文档..

谢谢！

Answer 1

这令人惊讶地涉及其中的一部分，我怀疑（AFAICT）仍然缺少专门围绕 elm-ui 设计的适当过渡库。

基本步骤是这样的：

定义开始和鼠标悬停状态的属性。
弄清楚这些对应于 elm-simple-animation 中的哪些属性。
为这些添加过渡。

Element.Input.button
    [ Background.color (Element.rgb 0.5 0.5 0.6)
    , Element.mouseOver
        [ Background.color (Element.rgb 0.7 0.7 1)
        ]
    , Transition.properties
        [ Transition.backgroundColor 500 []
        ]
        |> Element.htmlAttribute
    ]
    { onPress = Nothing
    , label = Element.text "Hello"
    }

你可以看到一个工作示例here。

我如何在 Elm-UI 中对鼠标进行动画处理？

How do i animate on mouse over in Elm-UI?

animation

elm

elm-ui