Skip to main content

whisker_css/prop/
transition.rs

1//! Transition longhand properties.
2
3use crate::css::Css;
4use crate::data_type::Time;
5use crate::data_type_ext::EasingFunction;
6use crate::keyword::TransitionPropertyKind;
7
8impl Css {
9    /// Sets `transition-property` — the property to transition.
10    /// <https://lynxjs.org/api/css/properties/transition-property>
11    pub fn transition_property(self, v: TransitionPropertyKind) -> Self {
12        self.push("transition-property", v)
13    }
14
15    /// Sets `transition-duration`.
16    /// <https://lynxjs.org/api/css/properties/transition-duration>
17    pub fn transition_duration(self, v: Time) -> Self {
18        self.push("transition-duration", v)
19    }
20
21    /// Sets `transition-timing-function`.
22    /// <https://lynxjs.org/api/css/properties/transition-timing-function>
23    pub fn transition_timing_function(self, v: EasingFunction) -> Self {
24        self.push("transition-timing-function", v)
25    }
26
27    /// Sets `transition-delay`. Negative delays cause the transition
28    /// to begin partway through its progression.
29    /// <https://lynxjs.org/api/css/properties/transition-delay>
30    pub fn transition_delay(self, v: Time) -> Self {
31        self.push("transition-delay", v)
32    }
33}
34
35#[cfg(test)]
36mod tests {
37    use crate::data_type_ext::EasingFunction;
38    use crate::ext::*;
39    use crate::keyword::TransitionPropertyKind;
40    use crate::Css;
41
42    #[test]
43    fn transition_set() {
44        let s = Css::new()
45            .transition_property(TransitionPropertyKind::name("opacity"))
46            .transition_duration(300.ms())
47            .transition_timing_function(EasingFunction::EaseInOut)
48            .transition_delay(100.ms());
49        assert_eq!(
50            s.to_string(),
51            "transition-property: opacity; transition-duration: 300ms; transition-timing-function: ease-in-out; transition-delay: 100ms;"
52        );
53    }
54
55    #[test]
56    fn transition_all_keyword() {
57        let s = Css::new().transition_property(TransitionPropertyKind::All);
58        assert_eq!(s.to_string(), "transition-property: all;");
59    }
60}