Updating to fix durationOut

examples/src/index.js

@@ -106,13 +106,11 @@ const DemoPage = ({ className }) => {
       setRandomEmoji(getRandomFrom(emojis))
 
       const word = getRandomFrom(words)
-      if(randomWordGroup.includes(word)) {
+      if (randomWordGroup.includes(word)) {
         setRandomWordGroup(randomWordGroup.filter(w => w !== word))
-      }
-      else {
+      } else {
         setRandomWordGroup(randomWordGroup.concat([word]).sort())
       }
-
     }, 2000)
     return () => {
       clearInterval(wordInterval)
@@ -185,13 +183,13 @@ const DemoPage = ({ className }) => {
               <pre>
                 <code>{`
 <AnimateOnChange
-  durationOut="1000"
+  durationOut="750"
 >
   ${randomWord}
 </AnimateOnChange>`}</code>
               </pre>
               <div className="example-aoc-slow">
-                <AnimateOnChange durationOut={1000}>
+                <AnimateOnChange durationOut={750}>
                   {randomWord}
                 </AnimateOnChange>
               </div>
@@ -205,9 +203,9 @@ const DemoPage = ({ className }) => {
             <code>animations</code> object.
           </p>
           <p>
-            Alternatively, a single <code>animation</code> property can be supplied with the base
-            name of the animation to use;
-            e.g. setting <code>animation="fade"</code> is equivalent to setting
+            Alternatively, a single <code>animation</code> property can be
+            supplied with the base name of the animation to use; e.g. setting{' '}
+            <code>animation="fade"</code> is equivalent to setting
             <code>animationIn="fadeIn" animationOut="fadeOut"</code>.
           </p>
           <LazyLoad height={200}>
@@ -443,8 +441,8 @@ ${randomWord}
             <code>import {`{ AnimateGroup }`} from 'react-animation'</code>
           </p>
           <p>
-            Use this component when you want to animate components being being added, 
-            removed or modified within a group of components.
+            Use this component when you want to animate components being being
+            added, removed or modified within a group of components.
           </p>
 
           <LazyLoad height={200}>
@@ -454,8 +452,8 @@ ${randomWord}
           </LazyLoad>
 
           <p>
-            By default this will fade-in new components as they are added to the group,
-            and fade-out components that are removed from the group.
+            By default this will fade-in new components as they are added to the
+            group, and fade-out components that are removed from the group.
           </p>
 
           <LazyLoad height={200}>
@@ -472,30 +470,31 @@ ${randomWord}
               <div className="example-animate-group">
                 <div>
                   <ul>
-                  <AnimateGroup animation="bounce">
-                    {randomWordGroup.map(word => (<li key={word}>{word}</li>))}
-                  </AnimateGroup>
+                    <AnimateGroup animation="bounce">
+                      {randomWordGroup.map(word => (
+                        <li key={word}>{word}</li>
+                      ))}
+                    </AnimateGroup>
                   </ul>
                 </div>
               </div>
             </div>
           </LazyLoad>
 
           <p>
-            Components may be added of removed in any order.
-            When using the component ensure that each child has a unique key within
-            the group.
+            Components may be added of removed in any order. When using the
+            component ensure that each child has a unique key within the group.
           </p>
-          
+
           <p>
-            The animation to use can be specified in the same way as <code>AnimateOnChange</code>,
-            using <code>animationIn</code> and <code>animationOut</code> properties.
-            Alternatively, a single <code>animation</code> property can be supplied with the base
-            name of the animation to use;
-            so <code>animation="fade"</code> is equivalent to 
+            The animation to use can be specified in the same way as{' '}
+            <code>AnimateOnChange</code>, using <code>animationIn</code> and{' '}
+            <code>animationOut</code> properties. Alternatively, a single{' '}
+            <code>animation</code> property can be supplied with the base name
+            of the animation to use; so <code>animation="fade"</code> is
+            equivalent to
             <code>animationIn="fadeIn" animationOut="fadeOut"</code>.
           </p>
-
         </div>
 
         <div className="page-content">
@@ -723,7 +722,6 @@ const StyledDemoPage = styled(DemoPage)`
       }
     }
 
-
     &-aoc {
       &-default {
         font-size: 40px;

src/AnimateOnChange/AnimateOnChange.test.js

@@ -230,7 +230,7 @@ describe('AnimateOnChange', () => {
     act(() => {
       component.update()
     })
-    component.simulate('transitionEnd');
+    component.simulate('transitionEnd')
 
     expect(component.find('span').get(0).props.className).not.toEqual(
       expect.stringContaining(`${className}-out`)
@@ -246,4 +246,20 @@ describe('AnimateOnChange', () => {
     )
     expect(component.find('span').get(0).props.style.background).toEqual('red')
   })
+
+  it('should correctly apply durationOut', () => {
+    const component = mount(
+      <AnimateOnChange durationOut={5000}>DurationOut Test</AnimateOnChange>
+    )
+    expect(component.find('span').get(0).props.style.animationDuration).toEqual(
+      '5000ms'
+    )
+  })
+
+  it('should should apply default durationOut', () => {
+    const component = mount(<AnimateOnChange>DurationOut Test</AnimateOnChange>)
+    expect(component.find('span').get(0).props.style.animationDuration).toEqual(
+      '200ms'
+    )
+  })
 })

src/AnimateOnChange/index.js

@@ -35,7 +35,7 @@ import '../theme/keyframes.css'
 
 const AnimateOnChange = ({
   animation: animationBaseName,
-  animationIn  = `${animationBaseName}In`,
+  animationIn = `${animationBaseName}In`,
   animationOut = `${animationBaseName}Out`,
   children,
   className,
@@ -46,17 +46,14 @@ const AnimateOnChange = ({
   const [displayContent, setDisplayContent] = useState(children)
   const firstUpdate = useRef(true)
 
-  useEffect(
-    () => {
-      // Don't run the effect the first time through
-      if (firstUpdate.current) {
-        firstUpdate.current = false
-        return
-      }
-      setAnimation('out')
-    },
-    [children]
-  )
+  useEffect(() => {
+    // Don't run the effect the first time through
+    if (firstUpdate.current) {
+      firstUpdate.current = false
+      return
+    }
+    setAnimation('out')
+  }, [children])
 
   const showDisplayContent = () => {
     if (animation === 'out') {
@@ -69,6 +66,7 @@ const AnimateOnChange = ({
     display: 'inline-block',
     transition: !className && `opacity ${durationOut}ms ease-out`,
     opacity: !className && animation === 'out' ? 0 : 1,
+    animationDuration: durationOut + 'ms',
     ...style
   }
 
@@ -105,7 +103,7 @@ AnimateOnChange.propTypes = {
 }
 
 AnimateOnChange.defaultProps = {
-  animation: 'fade',
+  animation: undefined,
   durationOut: 200
 }