noloadanim

A simple fix for Chrome's on page load css transition bug

If you don't know what it is, then you've not had this bug on your development stage yet, Reported here and here.

How does this approach work? Just block any transition on all the elements until the page has been fully rendered.

Install

npm install --save noloadanim

yarn add noloadanim

Usage

import React, { Component } from 'react'

import DisableOnLoadTrans from 'noloadanim'
import 'noloadanim/dist/index.css'

class Example extends Component {
  render() {
    return <DisableOnLoadTrans>
    {
      ...Your components
    }
    </DisableOnLoadTrans>
  }
}

And on Next.js (_app.js)

import DisableOnLoadTrans from 'noloadanim'
import 'noloadanim/dist/index.css'
function MyApp({ Component, pageProps }) {
  return (<DisableOnLoadTrans>
           <Component {...pageProps} />
        </DisableOnLoadTrans>)
}

export default MyApp

License

MIT © SonicCodes