From 1264f0f1301e709799426d3d95755fd1babe4a1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20K=C3=A5re=20Alsaker?= <john.kare.alsaker@gmail.com>
Date: Sat, 4 Nov 2023 21:23:37 +0100
Subject: [PATCH] Add style property transitions

---
 examples/themes/src/main.rs |  25 +++-
 src/context.rs              |  33 ++++-
 src/inspector.rs            | 109 +++++++++------
 src/style.rs                | 255 ++++++++++++++++++++++++++++++------
 src/view.rs                 |  43 ++++--
 src/views/scroll.rs         |   9 +-
 src/window_handle.rs        |  12 +-
 7 files changed, 376 insertions(+), 110 deletions(-)

diff --git a/examples/themes/src/main.rs b/examples/themes/src/main.rs
index 31f78872..8b67a4db 100644
--- a/examples/themes/src/main.rs
+++ b/examples/themes/src/main.rs
@@ -3,7 +3,7 @@ use floem::{
     keyboard::{Key, NamedKey},
     peniko::Color,
     reactive::create_signal,
-    style::Style,
+    style::{Background, BorderColor, Style, TextColor, Transition},
     style_class,
     view::View,
     views::{label, stack, text, Decorators},
@@ -20,6 +20,9 @@ fn app_view() -> impl View {
         .border(1.0)
         .border_color(Color::rgb8(109, 121, 135))
         .hover(|s| s.background(Color::rgb8(170, 175, 187)))
+        .transition(TextColor, Transition::linear(0.06))
+        .transition(BorderColor, Transition::linear(0.06))
+        .transition(Background, Transition::linear(0.06))
         .disabled(|s| {
             s.background(Color::DARK_GRAY.with_alpha_factor(0.1))
                 .border_color(Color::BLACK.with_alpha_factor(0.2))
@@ -30,9 +33,13 @@ fn app_view() -> impl View {
         .border_radius(5.0);
     let blue_theme = Style::new()
         .background(Color::rgb8(95, 102, 118))
+        .transition(Background, Transition::linear(0.1))
+        .transition(TextColor, Transition::linear(0.1))
         .color(Color::WHITE)
         .class(Button, move |_| blue_button)
-        .class(Label, |s| s.margin(4.0))
+        .class(Label, |s| {
+            s.margin(4.0).transition(TextColor, Transition::linear(0.1))
+        })
         .font_size(12.0);
 
     let green_button = Style::new()
@@ -40,10 +47,14 @@ fn app_view() -> impl View {
         .disabled(|s| {
             s.background(Color::rgb8(180, 188, 175).with_alpha_factor(0.3))
                 .border_color(Color::rgb8(131, 145, 123).with_alpha_factor(0.3))
+                .color(Color::GRAY)
         })
         .active(|s| s.background(Color::rgb8(95, 105, 88)).color(Color::WHITE))
         .color(Color::BLACK.with_alpha_factor(0.7))
         .border(2.0)
+        .transition(TextColor, Transition::linear(0.3))
+        .transition(BorderColor, Transition::linear(0.3))
+        .transition(Background, Transition::linear(0.3))
         .border_color(Color::rgb8(131, 145, 123))
         .hover(|s| s.background(Color::rgb8(204, 209, 201)))
         .padding(8.0)
@@ -51,8 +62,11 @@ fn app_view() -> impl View {
         .margin(6.0);
     let green_theme = Style::new()
         .background(Color::rgb8(227, 231, 226))
+        .transition(Background, Transition::linear(0.5))
         .class(Button, move |_| green_button)
-        .class(Label, |s| s.margin(4.0))
+        .class(Label, |s| {
+            s.margin(4.0).transition(TextColor, Transition::linear(0.5))
+        })
         .class(Frame, |s| {
             s.border(2.0)
                 .border_color(Color::rgb8(131, 145, 123).with_alpha_factor(0.2))
@@ -64,7 +78,7 @@ fn app_view() -> impl View {
         .font_size(16.0);
 
     let (counter, set_counter) = create_signal(0);
-    let (theme, set_theme) = create_signal(true);
+    let (theme, set_theme) = create_signal(false);
     let view = stack((stack((
         text("Toggle Theme")
             .class(Button)
@@ -120,7 +134,8 @@ fn app_view() -> impl View {
         .flex_col()
         .items_center()
         .justify_center()
-    });
+    })
+    .window_title(|| "Themes Example".to_string());
 
     let id = view.id();
     view.on_event(EventListener::KeyUp, move |e| {
diff --git a/src/context.rs b/src/context.rs
index 929a5d59..3d8f5ab3 100644
--- a/src/context.rs
+++ b/src/context.rs
@@ -2,7 +2,7 @@ use std::{
     collections::{HashMap, HashSet},
     ops::{Deref, DerefMut},
     rc::Rc,
-    time::Duration,
+    time::{Duration, Instant},
 };
 
 use floem_renderer::{
@@ -24,8 +24,10 @@ use crate::{
     inspector::CaptureState,
     menu::Menu,
     pointer::PointerInputEvent,
+    prop_extracter,
     responsive::{GridBreakpoints, ScreenSizeBp},
     style::{
+        Background, BorderBottom, BorderColor, BorderLeft, BorderRadius, BorderRight, BorderTop,
         BuiltinStyle, CursorStyle, DisplayProp, LayoutProps, Style, StyleClassRef, StyleProp,
         StyleSelector, StyleSelectors,
     },
@@ -47,6 +49,19 @@ pub(crate) struct MoveListener {
     pub(crate) callback: Box<dyn Fn(Point)>,
 }
 
+prop_extracter! {
+    pub(crate) ViewStyleProps {
+        pub border_left: BorderLeft,
+        pub border_top: BorderTop,
+        pub border_right: BorderRight,
+        pub border_bottom: BorderBottom,
+        pub border_radius: BorderRadius,
+
+        pub border_color: BorderColor,
+        pub background: Background,
+    }
+}
+
 pub struct ViewState {
     pub(crate) node: Node,
     pub(crate) children_nodes: Vec<Node>,
@@ -58,6 +73,7 @@ pub struct ViewState {
     pub(crate) viewport: Option<Rect>,
     pub(crate) layout_rect: Rect,
     pub(crate) layout_props: LayoutProps,
+    pub(crate) view_style_props: ViewStyleProps,
     pub(crate) animation: Option<Animation>,
     pub(crate) base_style: Option<Style>,
     pub(crate) style: Style,
@@ -81,6 +97,7 @@ impl ViewState {
             viewport: None,
             layout_rect: Rect::ZERO,
             layout_props: Default::default(),
+            view_style_props: Default::default(),
             request_layout: true,
             request_style: true,
             request_style_recursive: false,
@@ -199,6 +216,8 @@ pub struct AppState {
     /// This keeps track of all views that have an animation,
     /// regardless of the status of the animation
     pub(crate) animated: HashSet<Id>,
+    /// This is a set of view which have active transition animations.
+    pub(crate) transitioning: HashSet<Id>,
     pub(crate) cursor: Option<CursorStyle>,
     pub(crate) last_cursor: CursorIcon,
     pub(crate) keyboard_navigation: bool,
@@ -230,6 +249,7 @@ impl AppState {
             taffy,
             view_states: HashMap::new(),
             animated: HashSet::new(),
+            transitioning: HashSet::new(),
             disabled: HashSet::new(),
             keyboard_navigable: HashSet::new(),
             draggable: HashSet::new(),
@@ -700,18 +720,22 @@ pub struct InteractionState {
 
 pub struct StyleCx<'a> {
     pub(crate) app_state: &'a mut AppState,
+    pub(crate) current_view: Id,
     pub(crate) current: Rc<Style>,
     pub(crate) direct: Style,
     saved: Vec<Rc<Style>>,
+    pub(crate) now: Instant,
 }
 
 impl<'a> StyleCx<'a> {
-    pub(crate) fn new(app_state: &'a mut AppState) -> Self {
+    pub(crate) fn new(app_state: &'a mut AppState, root: Id) -> Self {
         Self {
             app_state,
+            current_view: root,
             current: Default::default(),
             direct: Default::default(),
             saved: Default::default(),
+            now: Instant::now(),
         }
     }
 
@@ -733,6 +757,11 @@ impl<'a> StyleCx<'a> {
         (*self.current).clone().apply(self.direct.clone())
     }
 
+    pub(crate) fn request_transition(&mut self) {
+        let id = self.current_view;
+        self.app_state_mut().transitioning.insert(id);
+    }
+
     pub fn app_state_mut(&mut self) -> &mut AppState {
         self.app_state
     }
diff --git a/src/inspector.rs b/src/inspector.rs
index 9e9ab247..3ec81774 100644
--- a/src/inspector.rs
+++ b/src/inspector.rs
@@ -468,60 +468,85 @@ fn selected_view(capture: &Rc<Capture>, selected: RwSignal<Option<Id>>) -> impl
 
                 let direct: HashSet<_> = view.direct_style.map.keys().copied().collect();
 
-                let mut styles = capture
+                let style = capture
                     .state
                     .styles
                     .get(&view.id)
                     .cloned()
-                    .unwrap_or_default()
+                    .unwrap_or_default();
+
+                let mut style_list = style
                     .map
+                    .clone()
                     .into_iter()
                     .map(|(p, v)| ((p, format!("{p:?}")), v))
                     .collect::<Vec<_>>();
 
-                styles.sort_unstable_by(|a, b| a.0 .1.cmp(&b.0 .1));
+                style_list.sort_unstable_by(|a, b| a.0 .1.cmp(&b.0 .1));
 
-                let style_list = static_list(styles.into_iter().map(|((prop, name), value)| {
-                    let name = name.strip_prefix("floem::style::").unwrap_or(&name);
-                    let name: Box<dyn View> = if direct.contains(&prop) {
-                        Box::new(text(name))
-                    } else {
-                        Box::new(stack((
-                            text("Inherited").style(|s| {
+                let style_list =
+                    static_list(style_list.into_iter().map(|((prop, name), value)| {
+                        let name = name.strip_prefix("floem::style::").unwrap_or(&name);
+                        let name: Box<dyn View> = if direct.contains(&prop) {
+                            Box::new(text(name))
+                        } else {
+                            Box::new(stack((
+                                text("Inherited").style(|s| {
+                                    s.margin_right(5.0)
+                                        .background(Color::WHITE_SMOKE.with_alpha_factor(0.6))
+                                        .border(1.0)
+                                        .border_radius(5.0)
+                                        .border_color(Color::WHITE_SMOKE)
+                                        .padding(1.0)
+                                        .font_size(10.0)
+                                        .color(Color::BLACK.with_alpha_factor(0.4))
+                                }),
+                                text(name),
+                            )))
+                        };
+                        let mut v: Box<dyn View> = match value {
+                            StyleMapValue::Val(v) => {
+                                let v = &*v;
+                                (prop.info.debug_view)(v)
+                                    .unwrap_or_else(|| Box::new(text((prop.info.debug_any)(v))))
+                            }
+                            StyleMapValue::Unset => Box::new(text("Unset".to_owned())),
+                        };
+                        if let Some(transition) = style.transitions.get(&prop).cloned() {
+                            let transition = stack((
+                                text("Transition").style(|s| {
+                                    s.margin_top(5.0)
+                                        .margin_right(5.0)
+                                        .background(Color::WHITE_SMOKE.with_alpha_factor(0.6))
+                                        .border(1.0)
+                                        .border_radius(5.0)
+                                        .border_color(Color::WHITE_SMOKE)
+                                        .padding(1.0)
+                                        .font_size(10.0)
+                                        .color(Color::BLACK.with_alpha_factor(0.4))
+                                }),
+                                text(format!("{transition:?}")),
+                            ))
+                            .style(|s| s.items_center());
+                            v = Box::new(stack((v, transition)).style(|s| s.flex_col()));
+                        }
+                        stack((
+                            stack((name.style(|s| {
                                 s.margin_right(5.0)
-                                    .background(Color::WHITE_SMOKE.with_alpha_factor(0.6))
-                                    .border(1.0)
-                                    .border_radius(5.0)
-                                    .border_color(Color::WHITE_SMOKE)
-                                    .padding(1.0)
-                                    .font_size(10.0)
-                                    .color(Color::BLACK.with_alpha_factor(0.4))
+                                    .color(Color::BLACK.with_alpha_factor(0.6))
+                            }),))
+                            .style(|s| {
+                                s.min_width(150.0).flex_direction(FlexDirection::RowReverse)
                             }),
-                            text(name),
-                        )))
-                    };
-                    let v: Box<dyn View> = match value {
-                        StyleMapValue::Val(v) => {
-                            let v = &*v;
-                            (prop.info.debug_view)(v)
-                                .unwrap_or_else(|| Box::new(text((prop.info.debug_any)(v))))
-                        }
-                        StyleMapValue::Unset => Box::new(text("Unset".to_owned())),
-                    };
-                    stack((
-                        stack((name.style(|s| {
-                            s.margin_right(5.0)
-                                .color(Color::BLACK.with_alpha_factor(0.6))
-                        }),))
-                        .style(|s| s.min_width(150.0).flex_direction(FlexDirection::RowReverse)),
-                        v,
-                    ))
-                    .style(|s| {
-                        s.padding(5.0)
-                            .hover(|s| s.background(Color::rgba8(228, 237, 216, 160)))
-                    })
-                }))
-                .style(|s| s.flex_col().width_full());
+                            v,
+                        ))
+                        .style(|s| {
+                            s.padding(5.0)
+                                .items_center()
+                                .hover(|s| s.background(Color::rgba8(228, 237, 216, 160)))
+                        })
+                    }))
+                    .style(|s| s.flex_col().width_full());
 
                 Box::new(
                     stack((
diff --git a/src/style.rs b/src/style.rs
index 60fa4184..f54f3f05 100644
--- a/src/style.rs
+++ b/src/style.rs
@@ -36,6 +36,7 @@ use std::hash::Hash;
 use std::hash::Hasher;
 use std::ptr;
 use std::rc::Rc;
+use std::time::Instant;
 pub use taffy::style::{
     AlignContent, AlignItems, Dimension, Display, FlexDirection, FlexWrap, JustifyContent, Position,
 };
@@ -45,7 +46,7 @@ use taffy::{
     style::{LengthPercentage, Style as TaffyStyle},
 };
 
-use crate::context::{InteractionState, StyleCx};
+use crate::context::InteractionState;
 use crate::responsive::{ScreenSize, ScreenSizeBp};
 use crate::unit::{Px, PxPct, PxPctAuto, UnitExt};
 use crate::view::View;
@@ -55,12 +56,20 @@ pub trait StylePropValue: Clone + PartialEq + Debug {
     fn debug_view(&self) -> Option<Box<dyn View>> {
         None
     }
+
+    fn interpolate(&self, _other: &Self, _value: f64) -> Option<Self> {
+        None
+    }
 }
 
 impl StylePropValue for i32 {}
 impl StylePropValue for bool {}
 impl StylePropValue for f32 {}
-impl StylePropValue for f64 {}
+impl StylePropValue for f64 {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        Some(*self * (1.0 - value) + *other * value)
+    }
+}
 impl StylePropValue for Display {}
 impl StylePropValue for Position {}
 impl StylePropValue for FlexDirection {}
@@ -80,6 +89,14 @@ impl<T: StylePropValue> StylePropValue for Option<T> {
     fn debug_view(&self) -> Option<Box<dyn View>> {
         self.as_ref().and_then(|v| v.debug_view())
     }
+
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        self.as_ref().and_then(|this| {
+            other
+                .as_ref()
+                .and_then(|other| this.interpolate(other, value).map(Some))
+        })
+    }
 }
 impl StylePropValue for Px {
     fn debug_view(&self) -> Option<Box<dyn View>> {
@@ -123,9 +140,25 @@ impl StylePropValue for Color {
                 .margin_left(6.0)
         });
         Some(Box::new(
-            stack((text(format!("{self:?}")), color)).style(|s| s.align_items(AlignItems::Center)),
+            stack((text(format!("{self:?}")), color)).style(|s| s.items_center()),
         ))
     }
+
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        let r = f64::interpolate(&(self.r as f64), &(other.r as f64), value)
+            .unwrap()
+            .round() as u8;
+        let g = f64::interpolate(&(self.g as f64), &(other.g as f64), value)
+            .unwrap()
+            .round() as u8;
+        let b = f64::interpolate(&(self.b as f64), &(other.b as f64), value)
+            .unwrap()
+            .round() as u8;
+        let a = f64::interpolate(&(self.a as f64), &(other.a as f64), value)
+            .unwrap()
+            .round() as u8;
+        Some(Color { r, g, b, a })
+    }
 }
 
 pub trait StyleClass: Default + Copy + 'static {
@@ -255,54 +288,65 @@ pub trait StylePropReader {
     type State: Debug;
     type Type: Clone;
 
-    /// Reads the property from the current style state.
-    /// Returns true if the property changed.
-    fn read(state: &mut Self::State, cx: &StyleCx) -> bool;
-
     /// Reads the property from the style.
     /// Returns true if the property changed.
-    fn read_style(state: &mut Self::State, style: &Style) -> bool;
+    fn read(
+        state: &mut Self::State,
+        style: &Style,
+        fallback: &Style,
+        now: &Instant,
+        request_transition: &mut bool,
+    ) -> bool;
 
     fn get(state: &Self::State) -> Self::Type;
     fn new() -> Self::State;
 }
 
 impl<P: StyleProp> StylePropReader for P {
-    type State = P::Type;
+    type State = (P::Type, TransitionState<P::Type>);
     type Type = P::Type;
-    fn read(state: &mut Self::State, cx: &StyleCx) -> bool {
-        let new = cx
-            .get_prop(P::default())
+    fn read(
+        state: &mut Self::State,
+        style: &Style,
+        fallback: &Style,
+        now: &Instant,
+        request_transition: &mut bool,
+    ) -> bool {
+        let new = style
+            .get_prop::<P>()
+            .or_else(|| fallback.get_prop::<P>())
             .unwrap_or_else(|| P::default_value());
-        let changed = new != *state;
-        *state = new;
-        changed
-    }
-    fn read_style(state: &mut Self::State, style: &Style) -> bool {
-        let new = style.get_prop_or_default::<P>();
-        let changed = new != *state;
-        *state = new;
-        changed
+        state.1.read(
+            style
+                .get_transition::<P>()
+                .or_else(|| fallback.get_transition::<P>()),
+        );
+        let changed = new != state.0;
+        if changed {
+            state.1.transition(&Self::get(state), &new);
+            state.0 = new;
+        }
+        changed | state.1.step(now, request_transition)
     }
     fn get(state: &Self::State) -> Self::Type {
-        state.clone()
+        state.1.get(&state.0)
     }
     fn new() -> Self::State {
-        P::default_value()
+        (P::default_value(), TransitionState::default())
     }
 }
 
 impl<P: StyleProp> StylePropReader for Option<P> {
     type State = Option<P::Type>;
     type Type = Option<P::Type>;
-    fn read(state: &mut Self::State, cx: &StyleCx) -> bool {
-        let new = cx.get_prop(P::default());
-        let changed = new != *state;
-        *state = new;
-        changed
-    }
-    fn read_style(state: &mut Self::State, style: &Style) -> bool {
-        let new = style.get_prop::<P>();
+    fn read(
+        state: &mut Self::State,
+        style: &Style,
+        fallback: &Style,
+        _now: &Instant,
+        _transition: &mut bool,
+    ) -> bool {
+        let new = style.get_prop::<P>().or_else(|| fallback.get_prop::<P>());
         let changed = new != *state;
         *state = new;
         changed
@@ -315,6 +359,7 @@ impl<P: StyleProp> StylePropReader for Option<P> {
     }
 }
 
+#[derive(Clone)]
 pub struct ExtratorField<R: StylePropReader> {
     state: R::State,
 }
@@ -326,11 +371,14 @@ impl<R: StylePropReader> Debug for ExtratorField<R> {
 }
 
 impl<R: StylePropReader> ExtratorField<R> {
-    pub fn read(&mut self, cx: &StyleCx) -> bool {
-        R::read(&mut self.state, cx)
-    }
-    pub fn read_style(&mut self, style: &Style) -> bool {
-        R::read_style(&mut self.state, style)
+    pub fn read(
+        &mut self,
+        style: &Style,
+        fallback: &Style,
+        now: &Instant,
+        request_transition: &mut bool,
+    ) -> bool {
+        R::read(&mut self.state, style, fallback, now, request_transition)
     }
     pub fn get(&self) -> R::Type {
         R::get(&self.state)
@@ -377,7 +425,7 @@ macro_rules! prop_extracter {
             $(,)?
         }
     ) => {
-        #[derive(Debug)]
+        #[derive(Debug, Clone)]
         $vis struct $name {
             $(
                 $prop_vis $prop: $crate::style::ExtratorField<$reader>,
@@ -386,15 +434,34 @@ macro_rules! prop_extracter {
 
         impl $name {
             #[allow(dead_code)]
-            $vis fn read_style(&mut self, style: &$crate::style::Style) -> bool {
-                false
-                $(| self.$prop.read_style(style))*
+            $vis fn read_style(&mut self, cx: &mut $crate::context::StyleCx, style: &$crate::style::Style) -> bool {
+                let mut transition = false;
+                let changed = false $(| self.$prop.read(style, style, &cx.now, &mut transition))*;
+                if transition {
+                    cx.request_transition();
+                }
+                changed
+            }
+
+            #[allow(dead_code)]
+            $vis fn read(&mut self, cx: &mut $crate::context::StyleCx) -> bool {
+                let mut transition = false;
+                let changed = self.read_explicit(&cx.direct, &cx.current, &cx.now, &mut transition);
+                if transition {
+                    cx.request_transition();
+                }
+                changed
             }
 
             #[allow(dead_code)]
-            $vis fn read(&mut self, cx: &$crate::context::StyleCx) -> bool {
-                false
-                $(| self.$prop.read(cx))*
+            $vis fn read_explicit(
+                &mut self,
+                style: &Style,
+                fallback: &Style,
+                now: &std::time::Instant,
+                request_transition: &mut bool
+            ) -> bool {
+                false $(| self.$prop.read(style, fallback, now, request_transition))*
             }
 
             $($prop_vis fn $prop(&self) -> <$reader as $crate::style::StylePropReader>::Type
@@ -431,12 +498,103 @@ impl<T> StyleMapValue<T> {
     }
 }
 
+#[derive(Clone, Debug)]
+pub(crate) struct ActiveTransition<T: StylePropValue> {
+    start: Instant,
+    before: T,
+    current: T,
+    after: T,
+}
+
+#[derive(Clone, Debug)]
+pub struct TransitionState<T: StylePropValue> {
+    transition: Option<Transition>,
+    active: Option<ActiveTransition<T>>,
+    initial: bool,
+}
+
+impl<T: StylePropValue> TransitionState<T> {
+    fn read(&mut self, transition: Option<Transition>) {
+        self.transition = transition;
+    }
+
+    fn transition(&mut self, before: &T, after: &T) {
+        if !self.initial {
+            return;
+        }
+        if self.transition.is_some() {
+            self.active = Some(ActiveTransition {
+                start: Instant::now(),
+                before: before.clone(),
+                current: before.clone(),
+                after: after.clone(),
+            });
+        }
+    }
+
+    fn step(&mut self, now: &Instant, request_transition: &mut bool) -> bool {
+        if !self.initial {
+            // We have observed the initial value. Any further changes may trigger animations.
+            self.initial = true;
+        }
+        if let Some(active) = &mut self.active {
+            if let Some(transition) = &self.transition {
+                let time = now.saturating_duration_since(active.start).as_secs_f64();
+                if time < transition.duration {
+                    if let Some(i) =
+                        T::interpolate(&active.before, &active.after, time / transition.duration)
+                    {
+                        active.current = i;
+                        *request_transition = true;
+                        return true;
+                    }
+                }
+            }
+            self.active = None;
+
+            true
+        } else {
+            false
+        }
+    }
+
+    fn get(&self, value: &T) -> T {
+        if let Some(active) = &self.active {
+            active.current.clone()
+        } else {
+            value.clone()
+        }
+    }
+}
+
+impl<T: StylePropValue> Default for TransitionState<T> {
+    fn default() -> Self {
+        Self {
+            transition: None,
+            active: None,
+            initial: false,
+        }
+    }
+}
+
+#[derive(Clone, Debug)]
+pub struct Transition {
+    duration: f64,
+}
+
+impl Transition {
+    pub fn linear(duration: f64) -> Self {
+        Self { duration }
+    }
+}
+
 #[derive(Default, Clone)]
 pub struct Style {
     pub(crate) map: HashMap<StylePropRef, StyleMapValue<Rc<dyn Any>>>,
     pub(crate) selectors: HashMap<StyleSelector, Style>,
     pub(crate) responsive: HashMap<ScreenSizeBp, Style>,
     pub(crate) classes: HashMap<StyleClassRef, Style>,
+    pub(crate) transitions: HashMap<StylePropRef, Transition>,
 }
 
 impl Style {
@@ -444,6 +602,10 @@ impl Style {
         Self::default()
     }
 
+    pub(crate) fn get_transition<P: StyleProp>(&self) -> Option<Transition> {
+        self.transitions.get(&P::prop_ref()).cloned()
+    }
+
     pub(crate) fn get_prop_or_default<P: StyleProp>(&self) -> P::Type {
         self.get_prop::<P>().unwrap_or_else(|| P::default_value())
     }
@@ -608,6 +770,7 @@ impl Style {
 
     pub(crate) fn apply_mut(&mut self, over: Style) {
         self.map.extend(over.map);
+        self.transitions.extend(over.transitions);
         for (selector, map) in over.selectors {
             self.set_selector(selector, map);
         }
@@ -659,6 +822,7 @@ impl Debug for Style {
             .field("selectors", &self.selectors)
             .field("classes", &self.classes)
             .field("responsive", &self.responsive)
+            .field("transitions", &self.transitions)
             .finish()
     }
 }
@@ -945,6 +1109,11 @@ impl Style {
         self
     }
 
+    pub fn transition<P: StyleProp>(mut self, _prop: P, transition: Transition) -> Self {
+        self.transitions.insert(P::prop_ref(), transition);
+        self
+    }
+
     fn selector(mut self, selector: StyleSelector, style: impl FnOnce(Style) -> Style) -> Self {
         let over = style(Style::default());
         self.set_selector(selector, over);
diff --git a/src/view.rs b/src/view.rs
index eed55660..041b75f2 100644
--- a/src/view.rs
+++ b/src/view.rs
@@ -92,11 +92,11 @@ use taffy::prelude::Node;
 
 use crate::{
     action::{exec_after, show_context_menu},
-    context::{AppState, DragState, EventCx, LayoutCx, PaintCx, StyleCx, UpdateCx},
+    context::{AppState, DragState, EventCx, LayoutCx, PaintCx, StyleCx, UpdateCx, ViewStyleProps},
     event::{Event, EventListener},
     id::Id,
     inspector::CaptureState,
-    style::{BoxShadowProp, LayoutProps, Outline, OutlineColor, Style, StyleClassRef, ZIndex},
+    style::{BoxShadowProp, Outline, OutlineColor, Style, StyleClassRef, ZIndex},
 };
 
 bitflags! {
@@ -239,11 +239,28 @@ pub trait View {
             cx.app_state_mut().request_layout(self.id());
         }
 
+        // This is used by the `request_transition` and `style` methods below.
+        cx.current_view = self.id();
+
+        let view_state = cx.app_state.view_state(self.id());
+
+        let mut transition = false;
+
         // Extract the relevant layout properties so the content rect can be calculated
         // when painting.
-        let mut props = LayoutProps::default();
-        props.read(cx);
-        cx.app_state_mut().view_state(self.id()).layout_props = props;
+        view_state
+            .layout_props
+            .read_explicit(&cx.direct, &cx.current, &cx.now, &mut transition);
+
+        view_state.view_style_props.read_explicit(
+            &cx.direct,
+            &cx.current,
+            &cx.now,
+            &mut transition,
+        );
+        if transition {
+            cx.request_transition();
+        }
 
         self.style(cx);
 
@@ -689,15 +706,16 @@ pub trait View {
             .unwrap_or(false);
         if !is_empty {
             let style = cx.app_state.get_computed_style(id).clone();
+            let view_style_props = cx.app_state.view_state(id).view_style_props.clone();
 
             if let Some(z_index) = style.get(ZIndex) {
                 cx.set_z_index(z_index);
             }
 
-            paint_bg(cx, &style, size);
+            paint_bg(cx, &style, &view_style_props, size);
 
             self.paint(cx);
-            paint_border(cx, &style, size);
+            paint_border(cx, &view_style_props, size);
             paint_outline(cx, &style, size)
         }
 
@@ -735,15 +753,16 @@ pub trait View {
 
                     let style = cx.app_state.get_computed_style(id).clone();
                     let view_state = cx.app_state.view_state(id);
+                    let view_style_props = view_state.view_style_props.clone();
                     let style = if let Some(dragging_style) = view_state.dragging_style.clone() {
                         view_state.combined_style.clone().apply(dragging_style)
                     } else {
                         style
                     };
-                    paint_bg(cx, &style, size);
+                    paint_bg(cx, &style, &view_style_props, size);
 
                     self.paint(cx);
-                    paint_border(cx, &style, size);
+                    paint_border(cx, &view_style_props, size);
                     paint_outline(cx, &style, size);
 
                     cx.restore();
@@ -762,8 +781,7 @@ pub trait View {
     fn paint(&mut self, cx: &mut PaintCx);
 }
 
-fn paint_bg(cx: &mut PaintCx, computed_style: &Style, size: Size) {
-    let style = computed_style.builtin();
+fn paint_bg(cx: &mut PaintCx, computed_style: &Style, style: &ViewStyleProps, size: Size) {
     let radius = style.border_radius().0;
     if radius > 0.0 {
         let rect = size.to_rect();
@@ -825,8 +843,7 @@ fn paint_outline(cx: &mut PaintCx, style: &Style, size: Size) {
     cx.stroke(&rect, style.get(OutlineColor), outline);
 }
 
-fn paint_border(cx: &mut PaintCx, style: &Style, size: Size) {
-    let style = style.builtin();
+fn paint_border(cx: &mut PaintCx, style: &ViewStyleProps, size: Size) {
     let left = style.border_left().0;
     let top = style.border_top().0;
     let right = style.border_right().0;
diff --git a/src/views/scroll.rs b/src/views/scroll.rs
index dec64007..3582c99b 100644
--- a/src/views/scroll.rs
+++ b/src/views/scroll.rs
@@ -625,19 +625,20 @@ impl<V: View> View for Scroll<V> {
         let style = cx.style();
 
         let handle_style = style.clone().apply_class(Handle);
-        self.handle_style.read_style(&handle_style);
+        self.handle_style.read_style(cx, &handle_style);
         self.handle_hover_style.read_style(
+            cx,
             &handle_style
                 .clone()
                 .apply_selectors(&[StyleSelector::Hover]),
         );
         self.handle_active_style
-            .read_style(&handle_style.apply_selectors(&[StyleSelector::Active]));
+            .read_style(cx, &handle_style.apply_selectors(&[StyleSelector::Active]));
 
         let track_style = style.apply_class(Track);
-        self.track_style.read_style(&track_style);
+        self.track_style.read_style(cx, &track_style);
         self.track_hover_style
-            .read_style(&track_style.apply_selectors(&[StyleSelector::Hover]));
+            .read_style(cx, &track_style.apply_selectors(&[StyleSelector::Hover]));
 
         self.child.style_main(cx);
     }
diff --git a/src/window_handle.rs b/src/window_handle.rs
index fe0415fa..09fa9db3 100644
--- a/src/window_handle.rs
+++ b/src/window_handle.rs
@@ -1,4 +1,5 @@
 use std::{
+    mem,
     rc::Rc,
     time::{Duration, Instant},
 };
@@ -450,7 +451,7 @@ impl WindowHandle {
     }
 
     fn style(&mut self) {
-        let mut cx = StyleCx::new(&mut self.app_state);
+        let mut cx = StyleCx::new(&mut self.app_state, self.view.id());
         self.view.style_main(&mut cx);
     }
 
@@ -633,6 +634,15 @@ impl WindowHandle {
         if !flags.is_empty() {
             self.request_paint();
         }
+
+        if !self.app_state.transitioning.is_empty() {
+            let transitioning = mem::take(&mut self.app_state.transitioning);
+            exec_after(Duration::from_millis(1), move |_| {
+                for id in transitioning {
+                    id.request_change(ChangeFlags::STYLE);
+                }
+            });
+        }
     }
 
     fn process_central_messages(&self) {