fix(my-joy-beta): animation speed based on component height

fixes #1137
This commit is contained in:
Sara Vieira 2018-02-05 13:50:43 +00:00 committed by Sérgio Ramos
parent 6ad179601e
commit 5eff7e0883

View File

@ -1,26 +1,25 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import scrollToElement from 'scroll-to-element'; import scrollToElement from 'scroll-to-element';
const ANIMATION_TIME = 400; function slideDown(el) {
function slideDown(el, timing) {
const { style } = el; const { style } = el;
const INITIAL = 'initial'; const INITIAL = 'initial';
const HIDDEN = 'hidden'; const HIDDEN = 'hidden';
timing = timing || `${ANIMATION_TIME}ms ease-out`;
// Get element height // Get element height
style.transition = INITIAL; style.transition = INITIAL;
style.visibility = HIDDEN; style.visibility = HIDDEN;
style.maxHeight = INITIAL; style.maxHeight = INITIAL;
const height = el.offsetHeight + 'px'; const offsetHeight = el.offsetHeight;
const height = offsetHeight + 'px';
style.removeProperty('visibility'); style.removeProperty('visibility');
style.maxHeight = '0'; style.maxHeight = '0';
style.overflow = HIDDEN; style.overflow = HIDDEN;
const timing = `${parseInt(height, 10) * 1.9}ms linear`;
// Begin transition // Begin transition
style.transition = `max-height ${timing}, opacity ${timing}`; style.transition = `max-height ${timing}, opacity ${timing}`;
requestAnimationFrame(() => { requestAnimationFrame(() => {
style.maxHeight = height; style.maxHeight = height;
style.opacity = '1'; style.opacity = '1';
@ -52,8 +51,7 @@ const Animated = WrappedComponent =>
<div <div
ref={w => { ref={w => {
this.wrapper = w; this.wrapper = w;
}} }}>
>
<WrappedComponent {...this.props} /> <WrappedComponent {...this.props} />
</div> </div>
); );