Как сделать анимацию при наведении курсора в Elm-UI?

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

Спасибо!


animation elm elm-ui
person Brock    schedule 08.04.2021    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

Основные шаги таковы:

  1. Определите свойства для состояний start и 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"
    }

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

person Jakub Hampl    schedule 09.04.2021
comment
Идеальный ответ спасибо! Просто добавьте эту ссылку, чтобы помочь людям с шагом 2 package.elm-lang.org/packages/andrewMacmurray/ - person Brock; 09.04.2021