Transition
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
export default function Example() {
return (
<DatePicker
animations={[transition()]}
/>
)
}
Customizing Transition#1
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
export default function Example() {
return (
<DatePicker
animations={[
transition({ duration: 800, from: 35 })
]}
/>
)
}
Customizing Transition#2
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
export default function Example() {
return (
<DatePicker
animations={[
transition({
from: 35,
transition: "all 400ms cubic-bezier(0.335, 0.010, 0.030, 1.360)",
}),
]}
/>
)
}
Opacity
import DatePicker from "react-multi-date-picker"
import opacity from "react-element-popper/animations/opacity"
export default function Example() {
return (
<DatePicker
animations={[opacity()]}
/>
)
}
Customizing Opacity
import DatePicker from "react-multi-date-picker"
import opacity from "react-element-popper/animations/opacity"
export default function Example() {
return (
<DatePicker
animations={[
opacity({ from: 0.1, to: 0.8, duration: 1000 })
]}
/>
)
}
Size
import DatePicker from "react-multi-date-picker"
import size from "react-element-popper/animations/size"
export default function Example() {
return (
<DatePicker
animations={[size()]}
/>
)
}
Opacity & Transition #1
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import opacity from "react-element-popper/animations/opacity"
export default function Example() {
return (
<DatePicker
animations={[
opacity(),
transition({ from: 35, duration: 800 })
]}
/>
)
}
Opacity & Transition #2
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import opacity from "react-element-popper/animations/opacity"
export default function Example() {
return (
<DatePicker
animations={[
opacity(),
transition({
from: 40,
transition: "all 400ms cubic-bezier(0.335, 0.010, 0.030, 1.360)",
}),
]}
/>
)
}