1. @react-md/transition
A package for working with react-md to use some simple transitions.
@react-md/transition
Package: @react-md/transition
Created by: mlaursen
Last modified: Mon, 11 Dec 2023 15:42:30 GMT
Version: 5.1.6
License: MIT
Downloads: 11,612
Repository: https://github.com/mlaursen/react-md

Install

npm install @react-md/transition
yarn add @react-md/transition

@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"));

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code