[Transition] Add 'parent/anchor' prop to Slide component.

[TomekStaszkiewicz]

It would be useful to be able to provide optional parent prop, which default would be equal to window. It is easy to implement(we did it ourselves in our company) and it increases the functionality at the same time!

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

1. The Slide component receives one more prop value - parent or anchor, which is a reference to DOM node. When this value is not passed to component, then use window as default(so it work the same way).

Motivation 🔦

It is an easy implementation, small change in code, but I think that there are many use cases when you need to slide NOT from the edge of the window.

[oliviertassinari]

It is an easy implementation

@TomekStaszkiewicz Did you try it? I think that it would be interesting to share the code and outcome :)

[TomekStaszkiewicz]

Yes, I did! :) All you have to do is:

1. Add parent as prop
2. Change getTranslateValue function.

function getTranslateValue(direction, node, parent = window) {
  const rect = node.getBoundingClientRect();
  let transform;

  if (node.fakeTransform) {
    transform = node.fakeTransform;
  } else {
    const computedStyle = window.getComputedStyle(node);
    transform =
      computedStyle.getPropertyValue('-webkit-transform') ||
      computedStyle.getPropertyValue('transform');
  }

  let offsetX = 0;
  let offsetY = 0;

  if (transform && transform !== 'none' && typeof transform === 'string') {
    const transformValues = transform
      .split('(')[1]
      .split(')')[0]
      .split(',');
    offsetX = parseInt(transformValues[4], 10);
    offsetY = parseInt(transformValues[5], 10);
  }

  if (direction === 'left') {
    return `translateX(${parent.offsetWidth}px) translateX(-${rect.left - offsetX}px)`;
  }

  if (direction === 'right') {
    return `translateX(-${rect.left + rect.width - offsetX}px)`;
  }

  if (direction === 'up') {
    return `translateY(${parent.offsetHeight}px) translateY(-${rect.top - offsetY}px)`;
  }

  if (direction === 'down') {
  return `translateY(-${rect.top + rect.height - offsetY}px)`;
}
}

The only problem I can see right now is that window object does not have offsetWidth and offsetHeight properties, but I'm sure it can be solved with simple if statement. ;)

[oliviertassinari]

What does fakeTransform refers to? Do you want to work on a pull request? Also, it would be interesting to benchmark with these sources:

• https://react.semantic-ui.com/modules/transition/#explorers-transition-explorer
• https://semantic-ui.com/modules/transition.html
• https://www.telerik.com/kendo-react-ui/components/animation/types/
• https://github.com/FormidableLabs/react-animations

Do you see an animation that matches what you are looking for?

[TomekStaszkiewicz]

#20266
I did not change anything related to fakeTransform actually ;). In my pull request you can see how light the change is :)