我有一个SPA写的榆树和风格与CSS.当视图更改时，将调用不同的渲染函数来渲染新视图.这也将停止呈现"旧"视图.
下一个要求是使视图更改平滑.我想这样做如下:
由于这些要求，浏览器应该同时呈现2个视图(旧视图和新视图).这就是我挣扎的地方.在新视图中添加一个过渡(使用CSS)并不困难.然而，将CSS添加到"旧"视图并不真正起作用，因为该视图将停止呈现.
如何在两个视图之间添加一个很好的过渡，其中两个视图将被渲染为彼此相邻短时间，并且都是从右向左滑动，视图的不透明度发生变化？
这在大多数基于VDom的框架中通常是相当困难的问题.
您需要在一段时间内同时渲染旧视图和新视图.要做到这一点，您还需要存储旧模型的快照.
你可以创建一个包装模块，看起来像这样:
type Animated model
= NotAnimating model
| Animating String model model
view : (model -> Html msg) -> Animated model -> Html msg
view viewFn model =
case model of
NotAnimating m -> viewFn m
Animating transitionType old new ->
Html.div [class "animated-transition", class transitionType]
[ Html.div [class "transition-out", Html.Attribute.attribute "inert" "inert" ] [ viewFn old ]
, Html.div [ class "transition-in" ] [ viewFn new ]
]
注意inert属性.这将使旧视图不接受用户事件/焦点.