pub trait TransitionExt:
IntoElement
+ StatefulInteractiveElement
+ ParentElement
+ FluentBuilder
+ Styled
+ 'static {
// Provided method
fn with_transition(self, id: impl Into<ElementId>) -> AnimatedWrapper<Self> { ... }
}Provided Methods§
Sourcefn with_transition(self, id: impl Into<ElementId>) -> AnimatedWrapper<Self>
fn with_transition(self, id: impl Into<ElementId>) -> AnimatedWrapper<Self>
Examples found in repository?
examples/hover_position.rs (line 41)
13 fn render(&mut self, _window: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
14 let linear = std::sync::Arc::new(transition::general::Linear);
15
16 div()
17 .id("Hoverable2")
18 .flex()
19 .flex_col()
20 .gap_3()
21 .size(px(500.0))
22 .justify_center()
23 .items_center()
24 .child(
25 div()
26 .id("Hoverable")
27 .child("Hover over rectangle")
28 .bg(gpui::white())
29 .text_color(gpui::red())
30 .flex()
31 .text_xl()
32 .h_10()
33 .justify_center()
34 .items_center(),
35 )
36 .child(
37 div().flex().gap_2().child(
38 div()
39 .id("Hoverable1")
40 .size_16()
41 .with_transition("Hoverable1")
42 .transition_on_hover(
43 std::time::Duration::from_millis(250),
44 linear.clone(),
45 |hovered, state| {
46 if *hovered {
47 state.size_32().ml_24()
48 } else {
49 state.size_16().ml_0()
50 }
51 },
52 )
53 .bg(gpui::red())
54 .ml_0(),
55 ),
56 )
57 }More examples
examples/button.rs (line 89)
73 fn render(self, _: &mut Window, _: &mut App) -> impl IntoElement {
74 let mut root = div()
75 .id(self.id.clone())
76 .flex()
77 .items_center()
78 .justify_center()
79 .w_full()
80 .border_1()
81 .border_color(rgb(0x262626))
82 .rounded_md()
83 .h_8()
84 .bg(rgb(0x0a0a0a));
85
86 root.style().refine(&self.style);
87
88 root.children(self.children)
89 .with_transition(self.id)
90 .when_else(
91 self.disabled.unwrap_or_default(),
92 |this| this.bg(rgb(0x333333)).cursor_not_allowed(),
93 |this| {
94 this.when_some(self.on_hover, |this, on_hover| {
95 this.on_hover(move |h, w, a| {
96 (on_hover)(h, w, a);
97 })
98 })
99 .when_some(self.on_click, |this, on_click| {
100 this.on_click(move |e, w, a| {
101 (on_click)(e, w, a);
102 })
103 })
104 .transition_when_else(
105 self.selected.unwrap_or_default(),
106 Duration::from_millis(250),
107 Linear,
108 |this| this.bg(rgb(0x1a1a1a)),
109 |this| this.bg(rgb(0x0a0a0a)),
110 )
111 .transition_on_hover(Duration::from_millis(250), Linear, |hovered, this| {
112 if *hovered {
113 this.bg(rgb(0x1a1a1a))
114 } else {
115 this
116 }
117 })
118 .when(!self.selected.unwrap_or_default(), |this| {
119 this.transition_on_click(
120 Duration::from_millis(150),
121 general::EaseInExpo,
122 |_, this| this.bg(rgb(0x262626)),
123 )
124 })
125 },
126 )
127 }examples/hover_color.rs (line 40)
15 fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
16 let linear = std::sync::Arc::new(transition::general::Linear);
17 let gradient1 = linear_gradient(
18 30.,
19 linear_color_stop(rgb(0xfccf31), 0.),
20 linear_color_stop(rgb(0xf55555), 1.),
21 );
22 let gradient2 = linear_gradient(
23 230.,
24 linear_color_stop(rgb(0xeead92), 0.),
25 linear_color_stop(rgb(0x6018dc), 1.),
26 );
27
28 div()
29 .id("Hoverable2")
30 .flex()
31 .flex_col()
32 .gap_3()
33 .size(px(500.0))
34 .justify_center()
35 .items_center()
36 .child(
37 div()
38 .id("Hoverable")
39 .child("Hover over rectangle")
40 .with_transition("Hoverable")
41 .bg(gpui::white())
42 .text_color(gpui::red())
43 .flex()
44 .text_xl()
45 .h_10()
46 .justify_center()
47 .items_center()
48 .transition_on_hover(
49 std::time::Duration::from_millis(250),
50 linear.clone(),
51 |hovered, state| {
52 if *hovered {
53 state
54 .text_bg(gpui::blue())
55 .text_color(gpui::yellow())
56 .text_lg()
57 } else {
58 state
59 .text_bg(gpui::white())
60 .text_color(gpui::black())
61 .text_xl()
62 }
63 },
64 ),
65 )
66 .child(
67 div().flex().gap_2().child(
68 div()
69 .id("Hoverable1")
70 .size_16()
71 .with_transition("Hoverable1")
72 .transition_on_hover(
73 std::time::Duration::from_millis(250),
74 linear.clone(),
75 |hovered, state| {
76 if *hovered {
77 state.bg(gpui::yellow()).opacity(0.)
78 } else {
79 state.bg(gpui::red()).opacity(1.)
80 }
81 },
82 )
83 .opacity(1.)
84 .bg(gpui::red()),
85 ),
86 )
87 .with_transition("Hoverable2")
88 .on_hover(cx.listener(|this, hovered, _, cx| {
89 this.hovered = *hovered;
90
91 // Changes made via .when(), .when_else(), etc., do not automatically trigger the animation cycle.
92 // Unlike event-based listeners that hold and manage the App context, these declarative methods do not pass the context to the animation controller.
93 // You must manually invoke a refresh or re-render to start the transition.
94 cx.notify();
95 }))
96 .transition_when(
97 self.hovered,
98 std::time::Duration::from_millis(500),
99 transition::general::EaseInExpo,
100 move |this| this.bg(gradient2),
101 )
102 .transition_on_click(
103 std::time::Duration::from_millis(500),
104 transition::general::EaseInExpo,
105 |_, state| state.bg(gpui::blue()),
106 )
107 .transition_on_hover(
108 std::time::Duration::from_millis(500),
109 transition::general::EaseInExpo,
110 move |hovered, state| {
111 if *hovered {
112 state.bg(gradient2)
113 } else {
114 state.origin()
115 }
116 },
117 )
118 .bg(gradient1)
119 }Dyn Compatibility§
This trait is not dyn compatible.
In older versions of Rust, dyn compatibility was called "object safety", so this trait is not object safe.