如何在 Elm-UI 中为鼠标悬停设置动画？

Question

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

谢谢！

Answer 1

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

基本步骤是这样的：

1. 定义开始和 mouseOver 状态的属性。
2. 找出这些对应于 elm-simple-animation 中的哪些属性。
3. 为这些添加一个过渡。

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"
    }

您可以在此处查看一个工作示例。