You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

113 rivejä
3.3 KiB

  1. import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
  2. import _createClass from 'babel-runtime/helpers/createClass';
  3. import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
  4. import _inherits from 'babel-runtime/helpers/inherits';
  5. import React from 'react';
  6. import ReactDOM from 'react-dom';
  7. import PropTypes from 'prop-types';
  8. import cssAnimate, { isCssAnimationSupported } from 'css-animation';
  9. import animUtil from './util/animate';
  10. var transitionMap = {
  11. enter: 'transitionEnter',
  12. appear: 'transitionAppear',
  13. leave: 'transitionLeave'
  14. };
  15. var AnimateChild = function (_React$Component) {
  16. _inherits(AnimateChild, _React$Component);
  17. function AnimateChild() {
  18. _classCallCheck(this, AnimateChild);
  19. return _possibleConstructorReturn(this, (AnimateChild.__proto__ || Object.getPrototypeOf(AnimateChild)).apply(this, arguments));
  20. }
  21. _createClass(AnimateChild, [{
  22. key: 'componentWillUnmount',
  23. value: function componentWillUnmount() {
  24. this.stop();
  25. }
  26. }, {
  27. key: 'componentWillEnter',
  28. value: function componentWillEnter(done) {
  29. if (animUtil.isEnterSupported(this.props)) {
  30. this.transition('enter', done);
  31. } else {
  32. done();
  33. }
  34. }
  35. }, {
  36. key: 'componentWillAppear',
  37. value: function componentWillAppear(done) {
  38. if (animUtil.isAppearSupported(this.props)) {
  39. this.transition('appear', done);
  40. } else {
  41. done();
  42. }
  43. }
  44. }, {
  45. key: 'componentWillLeave',
  46. value: function componentWillLeave(done) {
  47. if (animUtil.isLeaveSupported(this.props)) {
  48. this.transition('leave', done);
  49. } else {
  50. // always sync, do not interupt with react component life cycle
  51. // update hidden -> animate hidden ->
  52. // didUpdate -> animate leave -> unmount (if animate is none)
  53. done();
  54. }
  55. }
  56. }, {
  57. key: 'transition',
  58. value: function transition(animationType, finishCallback) {
  59. var _this2 = this;
  60. var node = ReactDOM.findDOMNode(this);
  61. var props = this.props;
  62. var transitionName = props.transitionName;
  63. var nameIsObj = typeof transitionName === 'object';
  64. this.stop();
  65. var end = function end() {
  66. _this2.stopper = null;
  67. finishCallback();
  68. };
  69. if ((isCssAnimationSupported || !props.animation[animationType]) && transitionName && props[transitionMap[animationType]]) {
  70. var name = nameIsObj ? transitionName[animationType] : transitionName + '-' + animationType;
  71. var activeName = name + '-active';
  72. if (nameIsObj && transitionName[animationType + 'Active']) {
  73. activeName = transitionName[animationType + 'Active'];
  74. }
  75. this.stopper = cssAnimate(node, {
  76. name: name,
  77. active: activeName
  78. }, end);
  79. } else {
  80. this.stopper = props.animation[animationType](node, end);
  81. }
  82. }
  83. }, {
  84. key: 'stop',
  85. value: function stop() {
  86. var stopper = this.stopper;
  87. if (stopper) {
  88. this.stopper = null;
  89. stopper.stop();
  90. }
  91. }
  92. }, {
  93. key: 'render',
  94. value: function render() {
  95. return this.props.children;
  96. }
  97. }]);
  98. return AnimateChild;
  99. }(React.Component);
  100. AnimateChild.propTypes = {
  101. children: PropTypes.any,
  102. animation: PropTypes.any,
  103. transitionName: PropTypes.any
  104. };
  105. export default AnimateChild;