@react-md/transition

Create simple CSS transitions using the provided transition hooks and components utilizing the default transition timing functions. This package also provides a collapse transition, scaling transition, vertical only scaling transition, and a new page transition named cross fade.

Provided components and hooks:

• Collapse or useCollapseTransition - transition an element in and out of view based on the height of the element
• CrossFade or useCrossFadeTransition - a transition generally used for a full page transition that fades and slightly moves a child component into view
• ScaleTransition or useScaleTransition - transition an element in and out of view with a scale transform that can be updated to just be scaleY
• useTransition - a hook implementation of the Transition component from react-transition-group
• CSSTransition or useCSSTransition - allows for a CSS transition that was heavily inspired by react-transition-group
• useFixedPositioning - hooks into the CSSTransition component from to fix an element to another element within the viewport

The rmd-transition-shadow-transition mixin allows you to "performantly" transition between two box shadow values using the opacity trick. This mixin automatically creates a pseudo ::before or ::after element with the final box shadow and animates the opacity once one of the $active-selectors are triggered. The code below will help explain this part a bit more.

Installation

npm install --save @react-md/transition

It is also recommended to install the following packages as they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/utils

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import type { useState } from "react";
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Collapse } from "@react-md/transition";

const App = () => {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <>
      <Button onClick={() => setCollapsed(!collapsed)}>Toggle</Button>
      <Collapse collapsed={collapsed}>
        <div>This is my collapsible content!</div>
      </Collapse>
    </>
  );
};

render(<App />, document.getElementById("root"));

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

5.1.6 (2023-12-11)

Bug Fixes

• select: port fixed positioning fixes back from v6.0.0 (feb9ec6), closes #1461

5.1.3 (2022-05-07)

Documentation

• fix typos throughout codebase (725d1a2)

Other Internal Changes

• typos: fix additional typos throughout repo (ef20132)

5.1.2 (2022-04-02)

Other Internal Changes

• react-md.dev: useLayoutEffect for page transitions (638c8ec)

5.1.0 (2022-03-18)

Other Internal Changes

• run lint-scripts --fix for consistent-type-imports (42d839d)

5.0.0 (2022-01-31)

Bug Fixes

• @react-md/transition: Do not create styles for hidden elements (6eff8a8)
• @react-md/utils: Positioning logic for inner-left/inner-right and vertical anchors (a38abfb)

4.0.3 (2021-12-31)

Other Internal Changes

• Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.1 (2021-11-27)

Documentation

• @react-md/transition: Fix transitionTo documentation to use useEffect (31a31da)

4.0.0 (2021-11-24)

Bug Fixes

• sass: Do not use legacy global functions (6159e16)

Features

• Update to use new JSX Transform and latest eslint (8111cd3)
• @react-md/transition: No longer use findDOMNode for transitions (cb952da)
• @react-md/typography: Renamed Text to Typography (30cf056)
• @react-md/utils: Export additional positioning types (b50a04c)

Other Internal Changes

• always skip lib check (229cef1)
• Re-ran prettier (9632d82)
• Updated remaining docs and tests for react-router-dom v6 (e012ef9)
• react-md: Remove prop-types package and usage (2637a6f)
• stylelint: Updated to use stylelint (22d1598)

Breaking Changes

• Minimum React version is now 16.14 instead of 16.8
• @react-md/typography: The Text component has been renamed to Typography to help with auto-imports conflicting with the Text element that exists in lib.d.ts
• react-md: There will no longer be run-time prop validation with the prop-types package.

3.1.0 (2021-09-10)

Other Internal Changes

• ran yarn format to include new files (48d3d7f)

3.0.1 (2021-08-15)

Bug Fixes

• Updated peerDependencies to fix yarn berry peer requirements (250efcd), closes #1224

3.0.0 (2021-08-13)

Other Internal Changes

• react-md.dev: updated examples to work with sass instead of node-sass (d8ddf51)

2.9.1 (2021-07-27)

Other Internal Changes

• install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Note: Version bump only for package @react-md/transition

2.8.5 (2021-07-03)

Note: Version bump only for package @react-md/transition

2.8.4 (2021-06-10)

Other Internal Changes

• ran prettier after upgrading to v2.3.0 (3ce236a)

2.8.3 (2021-05-18)

Documentation

• react-md.dev: updated tsdoc to work with typedoc (cf54c35)

2.8.2 (2021-04-23)

Note: Version bump only for package @react-md/transition

2.8.0 (2021-04-22)

Features

• @react-md/transition: Updated useFixedPositioning to merge style objects (1ab84d7)
• @react-md/transition: updated useFixedPositioning to support fixedTo ref (ced550a)

Other Internal Changes

• @react-md/transition: bump @types/react-transitition-group from v4.2.4 to v4.4.1 (f3f5c7b)
• tsconfig: separate tsconfig by package instead of a single root (b278230)

2.7.1 (2021-03-23)

Other Internal Changes

• ts: stopped using FC type (c5daa47)

2.7.0 (2021-02-28)

Documentation

• tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
• tsdoc: fixed some tsdoc annotations and styling (0449b86)

Other Internal Changes

• updated test coverage to not include conditional component PropTypes (24e5df1)

2.6.0 (2021-02-13)

Note: Version bump only for package @react-md/transition

2.5.5 (2021-01-30)

Note: Version bump only for package @react-md/transition

2.5.4 (2021-01-27)

Note: Version bump only for package @react-md/transition

2.5.0 (2020-12-15)

Note: Version bump only for package @react-md/transition

2.4.2 (2020-10-23)

Note: Version bump only for package @react-md/transition

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/transition

2.4.0 (2020-10-17)

Features

• @react-md/theme: Better Contrast Colors by Default and dev-utils refactor (#955) (519b128)

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/transition

2.3.0 (2020-09-10)

Note: Version bump only for package @react-md/transition

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/transition

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/transition

2.1.2 (2020-08-01)

Bug Fixes

• @react-md/transition: useCSSTransition now correctly forwards refs (36f832f)

2.1.1 (2020-07-21)

Note: Version bump only for package @react-md/transition

2.1.0 (2020-07-12)

Note: Version bump only for package @react-md/transition

2.0.2 (2020-06-30)

Bug Fixes

• LICENSE: Removed the time range from license since it was incorrect (50c9021)
• Added sideEffects field to package.json (31820b9)
• sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

Every transition was re-written in this release so it is a pretty big breaking change. The main differences are upgrading to transition API as well as shortening most of the transitions throughout react-md.

New Behavior and Features

• The Collapse component will have a static transition time instead of being based on the size of the content
• The Collapse component now supports a minHeight to create a partially collapsed element
• Added two additional components for default transitions: CrossFade and ScaleTransition
• Added hook versions for all the collapse and cross fade transitions:
  • useCollase
  • useCrossFade
• Created hook versions of the react-transition-group package to handle custom transitions with useTransition and useCSSTransition
• Created a hook to be used with the react-transition-group package to fix an element to another element within the page. (Similar to the Layover component)

Breaking Changes

• The Collapse component no longer uses react-motion and spring configuration.
• Removed the transition placeholders and the transition class names:
  • %md-transition--sharp
  • %md-transition--standard
  • %md-transition--acceleration
  • %md-transition--deceleration
  • .md-transition--sharp
  • .md-transition--standard
  • .md-transition--acceleration
  • .md-transition--deceleration

New SCSS Variables, Functions, and Mixins

• $rmd-transition-enter-time: 0.2s !default - The duration for an enter transition used for most transitions
• $rmd-transition-leave-time: 0.15s !default - The duration for a leave transition used for most transitions
• $rmd-collapse-enter-transition-func: deceleration !default - A customizable variable for the collapse transition that can be one of: sharp, standard, acceleration, or deceleration
• $rmd-collapse-leave-transition-func: acceleration !default - A customizable variable for the collapse transition that can be one of: sharp, standard, acceleration, or deceleration
• $rmd-transition-scale-enter-duration: $rmd-transition-enter-time !default - The transition duration for the new scaling transition's entering phase.
• $rmd-transition-scale-leave-duration: $rmd-transition-leave-time !default - The transition duration for the new scaling transition leaving phase.
• $rmd-transition-scale-y-enter-duration: $rmd-transition-enter-time !default - The transition duration for the new vertical scaling transition's entering phase.
• $rmd-transition-scale-y-leave-duration: $rmd-transition-leave-time !default - The transition duration for the new vertical scaling transition leaving phase.
• @mixin rmd-transition - applies the correct transition/animation timing function from one of the supported transition types.
• @mixin rmd-transition-shadow-transition - adds a performant version of a box-shadow transition using a pseudo element and opacity changes.

Renamed SCSS Variables, Functions, and Mixins

• $md-transition-sharp was renamed to $rmd-transition-sharp
• $md-transition-standard was renamed to $rmd-transition-standard
• $md-transition-acceleration was renamed to $rmd-transition-acceleration
• $md-transition-deceleration was renamed to $rmd-transition-deceleration
• $md-transition-time was renamed to $rmd-transition-standard-time
• $md-cross-fade-transition-time was renamed to $rmd-cross-fade-transition-duration
• $md-cross-fade-distance was renamed to $rmd-cross-fade-translate-distance and changed the default value from 16px to -1rem