Css 当我在几个月之间更改时，有什么方法可以在reactdatesrange上添加淡入淡出或幻灯片效果

与Airbnb完全一样，我认为这是不可能的，因为react-date-range与Airbnb的工作原理略有不同.

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

首先，这是code sample个月和DateRangerPicker个月之间使用CSSTransition.

下面是相同的代码，并对其作用进行了 comments :

CSS file:

/*
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;
}

Component file:

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>
  );
}