{"componentChunkName":"component---src-templates-post-jsx","path":"/animating-react-components-using-react-transition-group","result":{"data":{"mdx":{"frontmatter":{"slug":"animating-react-components-using-react-transition-group","title":"Animating React Components Using React Transition Group","date":"31 January, 2020","image":null,"excerpt":"Learn how to trigger animations during the mounting and unmounting stages of your React components."},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"slug\": \"animating-react-components-using-react-transition-group\",\n  \"date\": \"31 January, 2020\",\n  \"dateForSorting\": \"2020-01-31T14:14:04.006Z\",\n  \"title\": \"Animating React Components Using React Transition Group\",\n  \"tags\": [\"react\"],\n  \"excerpt\": \"Learn how to trigger animations during the mounting and unmounting stages of your React components.\",\n  \"image\": \"\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"In this article, you\\u2019ll learn how to trigger animations/transitions during the mounting and unmounting stages of your React component using React Transition Group.\"), mdx(\"p\", null, \"You can check out \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://alligator.io/react/react-transition-group/\"\n  }), \"the full article\"), \" on Alligator.io.\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"animating-react-components-using-react-transition-group"}}}