我如何在 Elm-UI 中的鼠标悬停动画？

问题描述

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

谢谢！

解决方法

这是令人惊讶的，部分原因是我怀疑专门围绕 elm-ui 设计的合适的过渡库 (AFAICT) 仍然缺失。

基本步骤如下：

1. 定义开始和鼠标悬停状态的属性。
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"
    }

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