如何解决我如何在 Elm-UI 中的鼠标悬停动画?
我想在将鼠标悬停在按钮上时进行简单的擦除。我想出使用 mouSEOver
在悬停时更改背景,但我不确定如何创建从一个背景到另一个背景的擦除。
我知道 elm-simple-animation,但我对 Elm 太陌生,无法理解文档..
谢谢!
解决方法
这是令人惊讶的,部分原因是我怀疑专门围绕 elm-ui 设计的合适的过渡库 (AFAICT) 仍然缺失。
基本步骤如下:
- 定义开始和鼠标悬停状态的属性。
- 找出这些属性对应于 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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。