Material-ui: Shutdown animation

Created on 17 Jun 2015  路  6Comments  路  Source: mui-org/material-ui

Is it possible to implement a global switch off of animation?
On slower computers lags occur during animation.
Thanks.

Most helpful comment

Setting disableTouchRipple={true} appears to handle it for buttons at least.

e.g.: <FlatButton disableTouchRipple={true}>w00t</FlatButton>

note: only tested with FlatButton, but from grepping the source for that prop it looks like it should work with other buttons (including datepicker buttons), and switches.

All 6 comments

+1. need switch to turn off animation.

Thanks @isergey - Dupe of #240

As of the transition to javascript styling, the workaround in #240 does not work anymore. Is there an other way to disable animations?

Setting disableTouchRipple={true} appears to handle it for buttons at least.

e.g.: <FlatButton disableTouchRipple={true}>w00t</FlatButton>

note: only tested with FlatButton, but from grepping the source for that prop it looks like it should work with other buttons (including datepicker buttons), and switches.

disableTouchRipple={true} does not work with an icon in my experience.
Example sandbox:
https://codesandbox.io/s/3r82644prq

Inside CompareBar.js:

{sku.length ? (
    <Badge
        data-sku={sku}
        badgeContent={<CancelIcon />}
        onClick={(event, checked) => {
            props.dispatch(
                actionRemoveProduct(sku)
            );
        }}
    >
        <img
            alt={sku}
            src={product.image}
            style={{
                height: '50px',
                width: '50px'
            }}
        />
    </Badge>
) : (
    <AddBoxIcon
        disableTouchRipple={true}
        disableFocusRipple={true}
        style={{ fontSize: 50 }}
    />
)}

Setting disableTouchRipple={true} appears to handle it for buttons at least.

e.g.: <FlatButton disableTouchRipple={true}>w00t</FlatButton>

note: only tested with FlatButton, but from grepping the source for that prop it looks like it should work with other buttons (including datepicker buttons), and switches.

This one is the best referenced answer after googling a lot of unsuccessfull answer, Thank you ( this is the cleanest way to do this, we can use css but I always search for the best solution provided )

note : Use case

Was this page helpful?
0 / 5 - 0 ratings