一个简单的场景是我有一个按钮，可以从API提取一些数据并将数据添加到列表中。
我想为新添加的项目应用opacity属性的CSS过渡，以便它随着添加到列表中而逐渐消失。
通常，这是通过使用带有opacity: 0;和transition规则的默认CSS类来完成的。然后，在添加元素之后，将另一个CSS类应用到该元素上，opacity: 1;并获得淡入效果。
您如何与榆树做到这一点？
这是将列表项立即添加到视图的方式，
ul [ class "list" ] (List.map (\item -> li [] [ text item ]) model.items)
阿米尔所说的确实是您唯一需要添加的内容。榆木会很好地工作。
如果您遇到任何问题，你可以尝试使用Html.Keyed包，它应该得到与订货摆脱臭虫/添加/删除-你只需要使用Html.Keyed.ul，它期望孩子是不是Html msg，但(String, Html msg)。因此，通常您会为row元素提供某种ID。（编辑：例如，添加到列表的前面看起来像是使用此代码添加到列表的后面。有关更新的示例，请参见此处。）
因此，用一些Elm代码（Ellie link）扩展Amir的答案：
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 ]
以及随附的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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句