You can also do it via pure CSS via the 'transition' property, just have the old fade out at like 1s time and the new fade in starting at the 1s time (or 1.001s to prevent a flicker in some browsers) while flipping display:none at the 1s mark (or just deleting it then entirely). A method I like is one where the height is shrunk on the old and grown on the new so they seem to flip between each other, which makes it easy to remove the old one later without any flickering oddities too.
On Sunday, October 2, 2016 at 6:24:56 AM UTC-6, Oliver Searle-Barnes wrote: > > Another option, which avoids having to add anything to your model, would be > > ``` > crossFadeTextTo text = > Animation.interrupt > [ Animation.to [Animation.opacity 0] > , Animation.send (DoneFadingOutOldTextPleaseSwitchModelToNewText text) > , Animation.to [Animation.opacity 1] > ] > ``` > > > On Friday, 30 September 2016 21:01:37 UTC+2, Matthew Griffith wrote: >> >> >> That's a pretty reasonable way to do it. Another option could be could >> be to use one div and use `Animation.send`. Basically you could do >> something like this. >> >> >> ``` >> Animation.interrupt >> [ Animation.to [Animation.opacity 0] >> , Animation.send DoneFadingOutOldTextPleaseSwitchModelToNewText >> , Animation.to [Animation.opacity 1] >> ] >> ``` >> >> In this case you'd have to keep new text in a 'staging area' in your >> model and then switch it in >> when DoneFadingOutOldTextPleaseSwitchModelToNewText fires. >> >> >> On Friday, September 30, 2016 at 2:30:53 PM UTC-4, Rex van der Spuy wrote: >>> >>> Hi Everyone! >>> >>> Just a quick question: Can anyone suggest a simple way to fade out some >>> old text and fade in some new text when a `model.text` value changes? >>> >>> I did this once a few apps ago where I created 2 `div` layers: >>> `currentText` and `previousText` >>> Then, when the text value changed, I moved the text to the previousText >>> layer and faded it out, and then displayed the updated text on the >>> currentText layer and faded it in. >>> (I used `elm-html-animation` for the fade effect.) >>> >>> Does this seem reasonable or is there a better, easier way? >>> >> -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
