[PopoverAnimationVertical] incorrect animation when targetOrigin horizontal is "middle"

[wskidmore]

Problem description

PopoverAnimationVertical does not open vertically when the targetOrigin.horizontal is middle.

This is caused by this line of code:
https://github.com/callemall/material-ui/blob/master/src/Popover/PopoverAnimationVertical.js#L11

const horizontal = targetOrigin.horizontal.replace('middle', 'vertical');

which is then used in the style below:

transformOrigin: `${horizontal} ${targetOrigin.vertical}`,

However, vertical is not a valid transform-origin property:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

The end result is that the animation doesn't have a transform-origin defined at all and produces an odd animation -- a sort of grow from inside out.

Suggested fix is:
const horizontal = targetOrigin.horizontal.replace('middle', 'center');

Which fixes my use case, but I imagine you would need to test for all the different possible directions and adjust it accordingly.

Link to minimal working code that reproduces the issue

https://www.webpackbin.com/bins/-Kp2LJe4qy7KTfHen7T4

Versions

• Material-UI: 0.18.6
• React: 15.6.1
• Browser: Chrome, Firefox