feat: 增加 Select 组件 arrow 动画

cuke-ui · Oct 13, 2018 · 2801585 · 2801585
1 parent bed843d
commit 2801585
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/components/select/Select.js b/components/select/Select.js
@@ -60,7 +60,11 @@ export default class Select extends PureComponent {
 
 		return (
 			<div className={cls(`${prefixCls}`, className)} {...attr}>
-				<div className={cls(`${prefixCls}-inner`)}>
+				<div
+					className={cls(`${prefixCls}-inner`, {
+						[`${prefixCls}-active`]: visible
+					})}
+				>
 					<Input
 						disabled={disabled}
 						readonly

diff --git a/components/select/styles.less b/components/select/styles.less
@@ -13,6 +13,11 @@
       cursor: pointer;
     }
   }
+  &-active {
+    .@{prefixCls}-arrow {
+      transform: translateY(-50%) rotate(180deg);
+    }
+  }
   &-open {
     animation: cuke-picker-open @default-transition forwards;
   }
@@ -29,6 +34,7 @@
     top: 50%;
     transform: translateY(-50%);
     color: @disabled-font-color;
+    transition: @default-transition;
   }
   &-content {
     width: 100%;

diff --git a/stories/dataEntry.js b/stories/dataEntry.js
@@ -160,7 +160,7 @@ storiesOf("数据录入", module)
 		))
 	)
 	.add(
-		"Select 开关",
+		"Select 选择器",
 		withInfo()(() => (
 			<div>
 				<h2>基本使用</h2>

diff --git a/stories/index.js b/stories/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { name, repository } from "../package.json";
 import Alert from "../components/alert";
-import Button from "../components/button";
+import Tag from "../components/tag";
 import { FaGithub } from "react-icons/fa";
 
 storiesOf("快速上手", module).add("在项目中使用", () => (
@@ -145,10 +145,10 @@ storiesOf("快速上手", module).add("在项目中使用", () => (
 					<p>← 左边是组件的列表,你可以点击预览效果</p>
 					<p>
 						点击右上角 ↗ 的{" "}
-						<Button type="info" size="small">
+						<Tag type="info">
 							Show Info
-						</Button>{" "}
-						按钮可以看到 示例源码 和 参数列表
+						</Tag>{" "}
+						按钮可以看到 <Tag>示例源码</Tag> 和 <Tag>参数列表</Tag>
 					</p>
 				</div>
 			}