Component-wrapper for collapse animation with CSS

Collapse component with CSS transition for elements with variable and dynamic height. react-collapse

Demo

CSS required

️You need to add style (transition) in your own stylesheet to add animation. Here is an example.

<style>
  .collapse-css-transition {
    transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
</style>

Alternatively you can add it using the transition prop.

Installation for React 16.8+

UMD minified 3.8kb, gzipped 1.7kb

npm i @kunukn/react-collapse
# or
# yarn add @kunukn/react-collapse

Installation for React 16.3+

UMD minified 5.8kb, gzipped 2.1kb

npm i @kunukn/react-collapse@^1
# or
# yarn add @kunukn/react-collapse@^1
import Collapse from "@kunukn/react-collapse";
// or with require syntax
// const Collapse = require("@kunukn/react-collapse");

const MyComponent = () => (
  <Collapse isOpen={true || false}>
    <div>Your content</div>
  </Collapse>
);

Properties

Prop Type Default
isOpen boolean false
children node function
render function
className string collapse-css-transition
transition string
elementType string div
collapseHeight string 0px
onChange function
onInit function
addState boolean false
noAnim boolean false
overflowOnExpanded boolean false

isOpen : boolean

Expands or collapses content.

children : node | function

Render the children.

const MyComponent = ({ isOpen }) => (
  <Collapse isOpen={isOpen}>
    <p>Paragraph of text.</p>
    <p>Another paragraph is also OK.</p>
    <p>Images and any other content are ok too.</p>
    <img src="cutecat.gif" />
  </Collapse>
);

Render content using the render-props pattern.

const MyComponent = ({ isOpen }) => (
  <Collapse isOpen={isOpen}>
    {state => (
      <div className={`using-collapse-state-to-add-css-class ${state}`}>
        <p>I know the collapse state: {state}</p>
      </div>
    )}
  </Collapse>
);

render : function

Render content using the render-props pattern.

const MyComponent = ({ isOpen }) => {
  const render = state => (
    <div className={`using-collapse-state-to-add-css-class ${state}`}>
      <p>I know the collapse state: {state}</p>
    </div>
  );
  return <Collapse isOpen={isOpen} render={render} />;
};

There are four possible collapse states: collapsed, collapsing, expanded, expanding.

className : string

You can specify a custom className. The default value is collapse-css-transition. Remember to add CSS transition if a className is provided.

transition : string

You can also specify a CSS transition inline by using the transition prop.

const MyComponent = ({ isOpen, duration = "290ms" }) => (
  <Collapse
    transition={`height ${duration} cubic-bezier(.4, 0, .2, 1)`}
    isOpen={isOpen}
  >
    <p>Paragraph of text</p>
  </Collapse>
);

elementType : string

You can specify the HTML element type for the collapse component. By default the element type is a div element.

const MyComponent = ({ isOpen }) => (
  <Collapse elementType="article" isOpen={isOpen}>
    <p>Paragraph of text inside an article element</p>
  </Collapse>
);

collapseHeight : string

You can specify the collapse height in CSS unit to partially show some content.

const MyComponent = ({ isOpen }) => (
  <Collapse collapseHeight="40px" isOpen={isOpen}>
    <p>A long paragraph of text inside an article element</p>
  </Collapse>
);

onChange : function

Callback function for when the transition changes.

const MyComponent = ({ isOpen }) => {
  const onChange = ({ state, style }) => {
    /*
    state: string = the state of the collapse component.
    style: object = styles that are applied to the component.
  */
  };

  return (
    <Collapse onChange={onChange} isOpen={isOpen}>
      <p>A long paragraph of text inside an article element</p>
    </Collapse>
  );
};

onInit : function

Similar to onChange but only invoked on DOM mounted.
This is an example that starts collapsed and expands on mount.

const MyComponent = () => {

  const [isOpen, setIsOpen] = React.useState(false);

  const onInit = ({ state, style, node }) => {
    /*
       node: HTMLElement = the DOM node of the component.
    */

    setIsOpen(true);
  };

  return (
    <div>
      <button onClick={() => setIsOpen(state => !state)}> Toggle </button>
      <Collapse onInit={onInit} isOpen={isOpen}>
        <p>A long paragraph of text inside an article element</p>
      </Collapse>
    </div>
  );
};

addState : boolean

If added, then one of the class names will be appended to the component depending on the state.

--c-collapsed
--c-collapsing
--c-expanded
--c-expanding

noAnim : boolean

If added, then there will be no collapse animation. State changes between collapsed and expanded.

overflowOnExpanded : boolean

If added, then overflow: hidden style will not be added when the state is expanded.

Custom props

Collapse applies custom props such as aria- and data- attributes to the component’s rendered DOM element. For example this can be used to set the aria-hidden attribute:

const MyComponent = ({ isOpen }) => (
  <Collapse aria-hidden={isOpen ? "false" : "true"} isOpen={isOpen}>
    <p>Paragraph of text</p>
  </Collapse>
);

Or you could specify a specific transitionDuration.

const collapseStyles = { transitionDuration: "270ms" };

const MyComponent = ({ isOpen }) => (
  <Collapse style={collapseStyles} isOpen={isOpen}>
    <p>Paragraph of text</p>
  </Collapse>
);

Development and testing

To run development

npm start or yarn start

git clone [repo]
cd [repo]
npm i
npm start
open http://localhost:6007
npm test

or with yarn

git clone [repo]
cd [repo]
yarn
yarn start
open http://localhost:6007
yarn test
  • To develop and play around: yarn start
  • To build the bundle: yarn build
  • To validate the bundle: yarn validate

To run example covering all features, use npm run storybook or yarn storybook.

CDN

https://unpkg.com/@kunukn/react-collapse/

<link
  rel="stylesheet"
  href="https://unpkg.com/@kunukn/react-collapse/dist/Collapse.umd.css"
/>
<script src="https://unpkg.com/@kunukn/react-collapse/dist/Collapse.umd.js"></script>

<script>
  var Collapse = window.Collapse;
</script>

Supported browsers

IE11 + Modern browsers

Supported React versions

  • React version 16.3+ : use Collapse version 1
  • React version 16.8+ : use Collapse version 2+

Used React 16.3 life-cycles

  • render (uses the style states to invoke CSS transition)
  • componentDidMount (initial expanded or collapsed state)
  • getDerivedStateFromProps (detect if isOpen props has changed and apply a new collapse state)
  • componentDidUpdate (update style states from the four possible collapse states)

Used React 16.8 hooks

  • useState
  • useEffect
  • useRef
  • useCallback
  • useReducer

Design goals

  • let the browser handle the animation using CSS height transition
  • minimal in file size
  • minimalistic API - only have a Collapse component which updates on isOpen props
  • flexible - provide your own markup, styling and easing
  • interruptible - can be reversed during movement
  • inert - when collapsed you should tab over the collapsed component
  • availability - from cdn or npm install
  • Collapsible on height only

Author:

kunukn

Download Details:

Official Website: https://github.com/kunukn/react-collapse

#reactjs #javascript

What is GEEK

Buddha Community

Component-wrapper for collapse animation with CSS

CSS Animation: translate3d, backdrop-filter, and Custom Tags

In this tutorial, we are going to learn:

  • how to create a smooth animation using the CSS transform translate3d prop.
  • why we’d want to use the cubic-bezier transition timing function and this function’s benefits.
  • how and why we use custom tags.
  • if you watch the video to the end, I also provide a bonus tip on using backdrop-filter to style some frost/blur style on background.

#css #css animation #css / style sheets #css animations #css background

Elvis Miranda

Elvis Miranda

1578029098

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process.

1. Tailwindcss-Vue

Tailwindcss-Vue is a library of UI components for Vue.js built using the Tailwind CSS utility-first CSS framework.

Tailwindcss-Vue

Download: https://github.com/advanced-data-machines/tailwindcss-vue/archive/master.zip

2. @zeit-ui/vue

Vue implementation for Zeit Style, originating from Zeit Design.

@zeit-ui/vue is a Vue implementation for zeit style, originating from Zeit Design. Lean more at GITHUB.

The design of the Zeit is concise and aesthetic feeling, this is an important reason for popular of Zeit. Now you can use them through the @zeit-ui/vue.

zeit-ui/vue

Download: https://github.com/zeit-ui/vue/archive/master.zip

3. CSSeffectsSnippets

Click on the animation to copy it to your clipboard

CSSeffectsSnippets

Demo: https://emilkowalski.github.io/css-effects-snippets/

Download: https://github.com/emilkowalski/css-effects-snippets/archive/master.zip

4. Vue Cirrus

A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh. These are the Vue Components for this CSS framework.

Vue Cirrus

Demo: https://florianwoelki.github.io/vue-cirrus/#/

Download: https://github.com/FlorianWoelki/vue-cirrus/archive/master.zip

5. Vue CSS Modules

Seamless mapping of class names to CSS modules inside of Vue components.

Vue CSS Modules

Download: https://github.com/fjc0k/vue-css-modules/archive/master.zip

6. BG MixMaster 90 — CSS Background Grid /Pattern Generator

make a background grid (like graph paper) using only one background gradient property and ended up with this killer mix tape for making all kinds of background grids and patterns.

BG MixMaster 90

Download: https://codepen.io/jasesmith/pen/YZEYRL

7. CSSOBJ

CSS Rules from JS, change rules dynamically, CSSOM, css modules, auto vendor prefixer, media query for old browsers.

CSS in JS solution, create CSSOM and CSS rules from js, features:

  • CSS Rules create and diff
  • CSS modules with local class
  • Auto vendor prefixer
  • Media query for old browsers
  • Dynamically change CSS

CSSOBJ

Demo: https://cssobj.github.io/cssobj-demo/

Download: https://github.com/cssobj/cssobj/archive/master.zip

#css #vue-css #css-component #vue-css-component #vue-js

The Guide To CSS Animation

Animations are very useful tools to make pages more appealing. I would like to start with what are animations, give some supplementary information, and give some animation syntax examples.

What are Animations?

Simply put, animations are changes in CSS styling, from one style to another. They make the web experience clearer and more understandable.

Let’s face it; animations are everywhere in these new generations of web

applications, whether they are triggered by clicking, hovering, focusing, or anything else. Check out  this site about endangered species and think about the industrialization and CSS animations.

As you can see, this website uses different animations to grab the attention of the user, and it is a powerful way of emphasizing the point they are trying to make.

Before animations, I would like to a step back and talk about pseudo selectors first, and then we’ll dive into animations.

#css-animation #css3 #css #web-design #animations #html-css

The Webster

The Webster

1596602879

Animated Character in CSS | CSS Animation | Webster

Animated Character in CSS | CSS Animation | Webster

In this video webster is going to show you how to create Animated Character in CSS| Webster

#css #css-animation #bootstrap #animation #ui #ux

Eric  Bukenya

Eric Bukenya

1626298440

Animating The Pseudo-Element Content Property Using CSS Keyframes Animation

At InVision, I’m building a small user interface (UI) that loads a list of documents and then caches them in memory for all subsequent renderings of the UI. During that one-time-only loading phase, I’m showing the static text, Loading...., in the view. But, this static text got me thinking about low-effort animations. And, whether or not I could use CSS @keyframes animations to animate the ellipsis portion of that text. It turns out, animating the content property works in modern browsers!

Normally with @keyframes animations, we use the timeline to define numeric CSS properties that can be animated gracefully using some sort of timing function. That said, it appears that we can use individual keyframes to set the state for non-animatable properties. These properties will be applied for the duration of the keyframe; but, will not receive any sort of transitiony magic.

In this demo, I’m animating the content property in order to apply an increasing number of dots (.) in the Loading....

#html / css #css #css keyframes #css keyframes animation