Блог

Я хотел бы просто стереть при наведении курсора мыши на кнопку. Я придумал использовать mouseOver для изменения фона при наведении, но я не уверен, как создать стирание с одного фона на другой. Я знаю о простой анимации elm, но я слишком новичок в Elm, чтобы понимать документы..

Спасибо!

Это удивительно сложно, и отчасти я подозреваю, что подходящая библиотека переходов, специально разработанная для elm-ui (AFAICT), все еще отсутствует.

Основные шаги выглядят следующим образом:

1. Определите свойства для состояний запуска и наведения курсора мыши.
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"
    }

 

Вы можете увидеть рабочий пример здесь.