How do I use CSS transitions when adding elements in Elm?
Simple scenario: I have a button that fetches some data from the API and adds the data to a list.
I would like to apply a CSS transition of the opacity property to the newly added element so that it disappears as it is added to the list.
This is usually done using the default CSS class with rules opacity: 0;
and transition
. Then, after adding the element, you apply another css class to it opacity: 1;
and you get the fade effect.
How do you do it with Knit?
This is how list items are added to the view right now,
ul [ class "list" ] (List.map (\item -> li [] [ text item ]) model.items)
source to share
Amir said that this is the only thing to add. Elm will work just fine with this.
If you run into any problems, you can try using the Html.Keyed package , which should get rid of ordering / appending / delete errors - you just use Html.Keyed.ul
which expects children to fail Html msg
instead (String, Html msg)
. Thus, usually you will have some sort of id for the row element. (Edit: for example, adding to the top of the list will look like an addition to this code. See here for an updated example.)
So, to expand on Amir's answer with some Elm code ( Ellie link ):
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 ]
And the accompanying HTML (see 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>
source to share
To achieve this goal, you need to use animation as shown below.
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; }
}
<p class="animation-enter">On page Load </p>
source to share