当我在几个月之间切换时，有什么方法可以在 "react-dates-range" 上添加淡入淡出或滑动效果？

Question

我正在使用库 https://github.com/hypeserver/react-date-range、react 17.0.2 和 next 12.0.0

我希望当我从一个月更改到另一个月时，而不是突然更改，以便能够配置淡入或幻灯片，就像在 AirBnb 日历中发生的那样。

有谁知道我该怎么做？非常感谢，对于给您带来的不便，我们深表歉意。

这是我的实际行为

这正是我想要的效果，但也可以是淡入或类似效果。

Answer 1

与 Airbnb 完全一样，我认为这是不可能的，因为 react-date-range 的工作方式与 airbnb 的工作方式略有不同。

但是您可以使用 react-transition-group 库中的 SwitchTransition 和 CSSTransition 获得类似的行为。你可以查看他们的文档 here.

首先，这里是 code sample 与 DateRangerPicker 在几个月之间使用 CSSTransition。

在同一代码下方，附有对其作用的评论：

CSS 文件:

/*
Overflow the Calendar container 
.rdrDateRangeWrapper is a class that react-date-range creates internally
*/
.rdrDateRangeWrapper {
  overflow-x: hidden;
}

/*
.rdrMonths is the class that react-date-range creates internally for the month container calendar

.fadeRightToLeft classes is related to react-transition-group
Created for transition from right to left
*/
.fadeRightToLeft-enter .rdrMonths {
  opacity: 0;
  transform: translateX(100%);
}
.fadeRightToLeft-enter-active .rdrMonths {
  opacity: 1;
  transform: translateX(0%);
}
.fadeRightToLeft-exit .rdrMonths {
  opacity: 1;
  transform: translateX(0%);
}
.fadeRightToLeft-exit-active .rdrMonths {
  opacity: 0;
  transform: translateX(-100%);
}
.fadeRightToLeft-enter-active .rdrMonths,
.fadeRightToLeft-exit-active .rdrMonths {
  transition: opacity 100ms, transform 100ms;
}

/*
Same as fadeRightToLeft:
.fadeLeftToRight classes is related to react-transition-group
Created for transition from left to right
*/
.fadeLeftToRight-enter .rdrMonths {
  opacity: 0;
  transform: translateX(-100%);
}
.fadeLeftToRight-enter-active .rdrMonths {
  opacity: 1;
  transform: translateX(0%);
}
.fadeLeftToRight-exit .rdrMonths {
  opacity: 1;
  transform: translateX(0%);
}
.fadeLeftToRight-exit-active .rdrMonths {
  opacity: 0;
  transform: translateX(100%);
}
.fadeLeftToRight-enter-active .rdrMonths,
.fadeLeftToRight-exit-active .rdrMonths {
  transition: opacity 100ms, transform 100ms;
}

组件文件:

import { useState } from "react";
import { addDays, isAfter } from "date-fns";
import { DateRangePicker } from "react-date-range";
import { SwitchTransition, CSSTransition } from "react-transition-group";

import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css";
import "./styles.css";

export default function App() {
  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: addDays(new Date(), 7),
      key: "selection"
    }
  ]);

  // state created to hold the first month that calendar is showing
  const [shownDateChangeValue, setShownDateChangeValue] = useState(new Date());

  // state created to check if use created next Month ou previous month
  const [isNextMonth, setIsNextMonth] = useState(true);

  return (
    <SwitchTransition mode="out-in">
      <CSSTransition
        /*** call the transition when month changes ***/
        key={shownDateChangeValue}
        /*** code related to SwitchTransition ***/
        addEndListener={(node, done) =>
          node.addEventListener("transitionend", done, false)
        }
        /*** Set the transition class related to the user action ***/
        classNames={isNextMonth ? "fadeRightToLeft" : "fadeLeftToRight"}
      >
        <DateRangePicker
          onChange={(item) => {
            setState([item.selection]);
          }}
          showSelectionPreview={true}
          moveRangeOnFirstSelection={false}
          months={2}
          ranges={state}
          direction="horizontal"
          /*** set the current month ***/
          shownDate={shownDateChangeValue}
          /*** Change shownDateChangeValue and isNextMonth states, dispatching the transition ***/
          onShownDateChange={(month) => {
            /* check if user click next or previous month */
            const isNext = isAfter(month, shownDateChangeValue);

            setIsNextMonth(isNext ? true : false);

            setShownDateChangeValue(month);
          }}
        />
      </CSSTransition>
    </SwitchTransition>
  );
}

当我在几个月之间切换时，有什么方法可以在 "react-dates-range" 上添加淡入淡出或滑动效果？

There's some way to add fadein or slide effect on "react-dates-range" when i change between months?

css

reactjs