Dropdown Animasyon Düzenlemeleri Yapıldı.

Author: mlelyakan

example/App.js

@@ -178,7 +178,7 @@ export class App extends Component {
 								onSelect={(i) => {
 									console.log(`${i}'nci nesne seçildi`)
 								}}
-								animationPosition='southeast'/>
+								animationPosition='southwest'/>
 						}/>
 				</div>
 

src/Dropdown/Dropdown.css

@@ -7,18 +7,22 @@
     padding: 5px 10px;
     background: #f5f5f5;
     border-radius: 5px;
-    display: flex;
+    display: none;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     transform: scale(0);
     position: absolute;
     box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.75);
     transform-origin: left top;
-    animation: dropdown-scaling 0.5s ease forwards;
     z-index: 99999;
 }
 
+.rce-dropdown.dropdown-show{
+    animation: dropdown-scaling 0.2s ease forwards;
+    display: flex;
+}
+
 @keyframes dropdown-scaling {
     0% {
         opacity: 0;
@@ -33,6 +37,26 @@
     }
 }
 
+.rce-dropdown.dropdown-hide{
+    animation: dropdown-reverse-scaling 0.2s ease forwards;
+    display: flex;
+}
+
+@keyframes dropdown-reverse-scaling {
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.5;
+        transform: scale(1.1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(0);
+    }
+}
+
 .rce-dropdown-open__nortwest {
     transform-origin: left top;
     left: 0;

src/Dropdown/Dropdown.js

@@ -10,13 +10,13 @@ export class Dropdown extends Component {
 		super(props);
 
 		this.state = {
-			show: false,
+			show: undefined,
 		};
 	}
 
 	onBlur(e) {
-		// if (this.state.show === true)
-		// 	this.setState({show: false});
+		if (this.state.show === true)
+			this.setState({show: false});
 	}
 
 	render() {
@@ -25,18 +25,16 @@ export class Dropdown extends Component {
 				{
 					<Button
 						{...this.props.buttonProps}
-						onClick={() => this.setState({show: !this.state.show})}/>
+						onClick={() => this.setState({ show: !this.state.show })} />
 				}
-				{
-					this.state.show &&
-					<div
-						className={
-							classNames(
-								'rce-dropdown',
-								this.props.animationType,
-								'rce-dropdown-open__' + this.props.animationPosition,
-							)
-						}>
+				<div
+					className={classNames(
+						'rce-dropdown',
+						this.props.animationType,
+						'rce-dropdown-open__' + this.props.animationPosition,
+						{ 'dropdown-hide': this.state.show === false },
+						{ 'dropdown-show': this.state.show === true })}>
+
 						<ul>
 							{
 								this.props.items.map((x, i) => (
@@ -46,16 +44,15 @@ export class Dropdown extends Component {
 								))
 							}
 						</ul>
-					</div>
-				}
+				</div>
 			</div>
 		);
 	}
 }
 
 Dropdown.defaultProps = {
 	animationType: 'default',
-	animationPosition: 'nortwest',
+	animationPosition: 'southwest',
 	items: [],
 	onSelect: Function,
 	buttonProps: null