انتقال

import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker 
      animations={[transition()]} 
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-center"
    />
  )
}

سفارشی کردن انتقال #1

import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        transition({ duration: 800, from: 35 })
      ]} 
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-center"
    />
  )
}

سفارشی کردن انتقال #2

import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        transition({
          from: 35,
          transition: "all 400ms cubic-bezier(0.335, 0.010, 0.030, 1.360)",
        }),
      ]} 
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-center"
    />
  )
}

تیرگی

import DatePicker from "react-multi-date-picker"
import opacity from "react-element-popper/animations/opacity"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker 
      animations={[opacity()]} 
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-center"
    />
  )
}

سفارشی کردن تیرگی

import DatePicker from "react-multi-date-picker"
import opacity from "react-element-popper/animations/opacity"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        opacity({ from: 0.1, to: 0.8, duration: 1000 })
      ]} 
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-center"
    />
  )
}

اندازه

import DatePicker from "react-multi-date-picker"
import size from "react-element-popper/animations/size"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker 
      animations={[size()]} 
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-center"
    />
  )
}

انتقال و تیرگی #1

import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import opacity from "react-element-popper/animations/opacity"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        opacity(), 
        transition({ from: 35, duration: 800 })
      ]} 
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-center"
    />
  )
}

انتقال و تیرگی #2

import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import opacity from "react-element-popper/animations/opacity"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        opacity(),
        transition({
          from: 40,
          transition: "all 400ms cubic-bezier(0.335, 0.010, 0.030, 1.360)",
        }),
      ]} 
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-center"
    />
  )
}