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

Question

当鼠标悬停在按钮上时，我想要一个简单的擦除。我想出了在悬停时使用mouseOver来更改背景，但我不知道如何创建从一个背景到另一个背景的擦除。我知道elm的简单动画，但我对elm太陌生了，无法理解这些文档。。

谢谢！

Answer 1

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

基本步骤如下：

1. 定义启动和mouseOver状态的属性
2. 找出这些属性对应于elm简单动画中的哪些属性
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"
}

你可以在这里看到一个工作示例。