在Elm中添加元素时如何使用CSS过渡？

Question

在Elm中添加元素时如何使用CSS过渡？

Joh*_*tål 3 css css-transitions elm

简单的场景是我有一个按钮从API获取一些数据并将数据添加到列表中.

我想为新添加的项应用opacity属性的CSS转换,以便在添加到列表时淡入.

通常这是通过使用默认的CSS类opacity: 0;和transition规则来完成的.然后在添加元素之后,将另一个CSS类应用于它,opacity: 1;您将获得淡入效果.

你是如何与榆树一起做的？

这是列表项目现在添加到视图的方式,

ul [ class "list" ] (List.map (\item -> li [] [ text item ]) model.items)

Answer 1

Mar*_*zek 5

Amir所说的真的是你唯一需要补充的东西.榆树将与此一起工作就好了.

如果您遇到任何问题,你可以尝试使用Html.Keyed包,这应该摆脱与排序/添加/删除错误的-你只需要使用Html.Keyed.ul,它期望孩子是不是Html msg,但(String, Html msg).所以通常你会有一些行元素的ID.(编辑:例如,添加到列表的前面似乎是添加到此代码.请参阅此处获取更新示例.)

所以,用一些榆树代码扩展Amir的答案(Ellie链接):

module Main exposing (..)

import Html as H exposing (Html)
import Html.Events as HE


type alias Model =
    { rows : List String }


type Msg
    = AddText


main : Program Never Model Msg
main =
    H.beginnerProgram
        { model = model
        , update = update
        , view = view
        }


model : Model
model =
    { rows = [] }


update : Msg -> Model -> Model
update msg model =
    case msg of
        AddText ->
            { model | rows = model.rows ++ [ "Another row" ] }


view : Model -> Html Msg
view model =
    H.div []
        [ H.button [ HE.onClick AddText ] [ H.text "add new row" ]
        , H.ul [] (List.map viewRow model.rows)
        ]


viewRow : String -> Html Msg
viewRow row =
    H.li [] [ H.text row ]

Run Code Online (Sandbox Code Playgroud)

以及随附的HTML(参见CSS):

<html>
<head>
  <style>
    html {
      background: #F7F7F7;
      color: red;
    }
    li {
      animation: fadein 2s;
    }

    @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
  </style>
</head>
<body>
  <script>
    var app = Elm.Main.fullscreen()
  </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，9 月前
查看次数：	732 次
最近记录：	8 年，9 月前