Explore: Simplifies rich history drawer animation logic (#26633)

Changes the logic of the rich history drawer animation to use
CSS animations rather than a timer and react state

public/app/features/explore/RichHistory/RichHistoryContainer.tsx

 // Libraries
 // Libraries
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Resizable } from 're-resizable';
 import { Resizable } from 're-resizable';
 import { connect } from 'react-redux';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { hot } from 'react-hot-loader';
-import { css, cx } from 'emotion';
+import { css, cx, keyframes } from 'emotion';
 
 
 // Services & Utils
 // Services & Utils
 import store from 'app/core/store';
 import store from 'app/core/store';
@@ -21,6 +21,16 @@ import { RichHistory, Tabs } from './RichHistory';
 //Actions
 //Actions
 import { deleteRichHistory } from '../state/actions';
 import { deleteRichHistory } from '../state/actions';
 
 
+const drawerSlide = keyframes`
+  0% {
+    transform: translateY(400px);
+  }
+
+  100% {
+    transform: translateY(0px);
+  }
+`;
+
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const shadowColor = theme.isLight ? theme.palette.gray4 : theme.palette.black;
   const shadowColor = theme.isLight ? theme.palette.gray4 : theme.palette.black;
 
 
@@ -38,11 +48,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     `,
     drawerActive: css`
     drawerActive: css`
       opacity: 1;
       opacity: 1;
-      transition: transform 0.5s ease-out;
-    `,
-    drawerNotActive: css`
-      opacity: 0;
-      transform: translateY(400px);
+      animation: 0.5s ease-out ${drawerSlide};
     `,
     `,
     rzHandle: css`
     rzHandle: css`
       background: ${theme.colors.formInputBorder};
       background: ${theme.colors.formInputBorder};
@@ -72,15 +78,8 @@ export interface Props {
 }
 }
 
 
 export function RichHistoryContainer(props: Props) {
 export function RichHistoryContainer(props: Props) {
-  const [visible, setVisible] = useState(false);
   const [height, setHeight] = useState(400);
   const [height, setHeight] = useState(400);
 
 
-  /* To create sliding animation for rich history drawer */
-  useEffect(() => {
-    const timer = setTimeout(() => setVisible(true), 10);
-    return () => clearTimeout(timer);
-  }, []);
-
   const { richHistory, width, firstTab, activeDatasourceInstance, exploreId, deleteRichHistory, onClose } = props;
   const { richHistory, width, firstTab, activeDatasourceInstance, exploreId, deleteRichHistory, onClose } = props;
   const theme = useTheme();
   const theme = useTheme();
   const styles = getStyles(theme);
   const styles = getStyles(theme);
@@ -88,7 +87,7 @@ export function RichHistoryContainer(props: Props) {
 
 
   return (
   return (
     <Resizable
     <Resizable
-      className={cx(styles.container, visible ? styles.drawerActive : styles.drawerNotActive)}
+      className={cx(styles.container, styles.drawerActive)}
       defaultSize={{ width: drawerWidth, height: '400px' }}
       defaultSize={{ width: drawerWidth, height: '400px' }}
       handleClasses={{ top: styles.rzHandle }}
       handleClasses={{ top: styles.rzHandle }}
       enable={{
       enable={{