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

【问题标题】：How do I use CSS transitions when adding elements in Elm?在 Elm 中添加元素时如何使用 CSS 过渡？
【发布时间】：2017-03-29 07:10:02
【问题描述】：

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

我想为新添加的项目应用 opacity 属性的 CSS 过渡，以便它在添加到列表时淡入。

通常这是通过使用带有opacity: 0; 和transition 规则的默认CSS 类来完成的。然后在添加元素后，您使用 opacity: 1; 对其应用另一个 CSS 类，然后您将获得淡入效果。

Elm 如何做到这一点？

这就是现在将列表项添加到视图中的方式，

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

【问题讨论】：

同理。追加元素，添加类。
@Justinas 这里有一个时间问题需要解决。我不追加元素，Elm 会根据 Model 中的 List 呈现一个列表。
你也可以在li中添加一个默认类ul [ class "unsorted-list" ] (List.map (\item ->li [class "list-item hidden"] [ text item ]) model.items)，并在此行之后直接删除hidden类，

标签： css css-transitions elm

【解决方案1】：

阿米尔所说的确实是您唯一需要添加的内容。 Elm 可以很好地解决这个问题。

如果您遇到任何问题，您可以尝试使用Html.Keyed package，它应该可以消除排序/添加/删除的错误 - 您只需使用Html.Keyed.ul，它期望孩子不是Html msg，而是@ 987654326@。所以通常你会有某种行元素的 ID。 （编辑：例如添加到列表的前面看起来就像添加到此代码的后面。有关更新的示例，请参阅here。）

所以，用一些 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>

【讨论】：

【解决方案2】：

您需要使用动画来实现此功能，如下所示

var para = document.createElement("P");                       // Create a <p> element
var t = document.createTextNode("Element added with Javascript");       // Create a text node
para.appendChild(t);                                          // Append the text to <p>
para.className = 'animation-enter'                            // Add animation enter
document.body.appendChild(para);                              // Append <p> to <body>

.animation-enter{
  animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

&lt;p class="animation-enter"&gt;On page Load &lt;/p&gt;

【讨论】：