Bump animation time for breadcrumbs up to 640ms

turt2live · turt2live · commit b84af372b980 · 2020-06-09T15:35:07.000-06:00
This matches the design, unlike the 300ms which was too fast.
diff --git a/res/css/views/rooms/_RoomBreadcrumbs2.scss b/res/css/views/rooms/_RoomBreadcrumbs2.scss
@@ -39,7 +39,7 @@ limitations under the License.
 
         // Timing function is as-requested by design.
         // NOTE: The transition time MUST match the value passed to CSSTransition!
-        transition: margin-left 300ms cubic-bezier(0.66, 0.02, 0.36, 1);
+        transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
     }
 
     .mx_RoomBreadcrumbs2_placeholder {
diff --git a/src/components/views/rooms/RoomBreadcrumbs2.tsx b/src/components/views/rooms/RoomBreadcrumbs2.tsx
@@ -104,7 +104,7 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
             // NOTE: The CSSTransition timeout MUST match the timeout in our CSS!
             return (
                 <CSSTransition
-                    appear={true} in={this.state.doAnimation} timeout={300}
+                    appear={true} in={this.state.doAnimation} timeout={640}
                     classNames='mx_RoomBreadcrumbs2'
                 >
                     <div className='mx_RoomBreadcrumbs2'>

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ limitations under the License.`
`39`	`39`
`40`	`40`	`// Timing function is as-requested by design.`
`41`	`41`	`// NOTE: The transition time MUST match the value passed to CSSTransition!`
`42`		`- transition: margin-left 300ms cubic-bezier(0.66, 0.02, 0.36, 1);`
	`42`	`+ transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`.mx_RoomBreadcrumbs2_placeholder {`
Original file line number	Diff line number	Diff line change
`@@ -104,7 +104,7 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState`
`104`	`104`	`// NOTE: The CSSTransition timeout MUST match the timeout in our CSS!`
`105`	`105`	`return (`
`106`	`106`	`<CSSTransition`
`107`		`- appear={true} in={this.state.doAnimation} timeout={300}`
	`107`	`+ appear={true} in={this.state.doAnimation} timeout={640}`
`108`	`108`	`classNames='mx_RoomBreadcrumbs2'`
`109`	`109`	`>`
`110`	`110`	`<div className='mx_RoomBreadcrumbs2'>`