diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md index 9521f0485f..8048b02f9b 100644 --- a/components/breadcrumb/demo/router.md +++ b/components/breadcrumb/demo/router.md @@ -2,13 +2,12 @@ - order: 2 -和 `react-router@1.0.0-beta3` 进行结合使用。 +和 `react-router@1.x` 进行结合使用。 --- ````jsx var ReactRouter = require('react-router'); -var history = require('react-router/lib/HashHistory').history; var Router = ReactRouter.Router; var Route = ReactRouter.Route; var Link = ReactRouter.Link; @@ -37,13 +36,13 @@ var Home = React.createClass({ paddingBottom: 15, borderBottom: '1px dashed #ccc' }}>点击上面的导航切换页面,面包屑在下面: - + ); } }); React.render(( - + diff --git a/components/breadcrumb/index.jsx b/components/breadcrumb/index.jsx index c3be890eaf..48d4442d05 100644 --- a/components/breadcrumb/index.jsx +++ b/components/breadcrumb/index.jsx @@ -18,27 +18,27 @@ let BreadcrumbItem = React.createClass({ let Breadcrumb = React.createClass({ propTypes: { - router: React.PropTypes.object - }, - contextTypes: { - router: React.PropTypes.object + router: React.PropTypes.object, + routes: React.PropTypes.array, + params: React.PropTypes.object }, render() { - let crumbs, routes, params; + let crumbs; let ReactRouter = this.props.router; - if (this.context.router && ReactRouter) { + let routes = this.props.routes; + let params = this.props.params; + if (routes && routes.length > 0 && ReactRouter) { let Link = ReactRouter.Link; - routes = this.context.router.state.branch; - params = this.context.router.state.params; crumbs = routes.map(function(route, i) { let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) { return params[key] || replacement; }); let link; + let path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path); if (i === routes.length - 1) { link = {name}; } else { - link = {name}; + link = {name}; } return {link}; }); diff --git a/components/breadcrumb/index.md b/components/breadcrumb/index.md index 5bf5d98c33..e9956ead30 100644 --- a/components/breadcrumb/index.md +++ b/components/breadcrumb/index.md @@ -13,3 +13,28 @@ - 当系统拥有超过两级以上的层级结构时; - 当需要告知用户“你在哪里”时; - 当需要向上导航的功能时。 + +## API + +```html + + 首页 + 应用中心 + 应用列表 + 某应用 + +``` + +### Breadcrumb + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|-----------|------------------------------------------|------------|---------|--------| +| router | 可传入 react-router 的实例 | Object | | - | +| routes | router 的路由栈信息 | Array | | - | +| params | 路由的参数 | Object | | - | + +### Breadcrumb.Item + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|-----------|------------------------------------------|------------|---------|--------| +| href | 链接,如不传则不可点击 | string | | - | diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index 2f59274366..820da54238 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -1,9 +1,8 @@ -# 默认 +# 进场和离场 -- order: 0 - -默认子节点进场动画。 +- order: 1 +自动。 --- @@ -13,12 +12,12 @@ var EnterAnimation = antd.EnterAnimation; var Test = React.createClass({ getInitialState() { return { - show:true, + show: true } }, onClick() { this.setState({ - show:!this.state.show, + show: !this.state.show }) }, render() { @@ -28,22 +27,8 @@ var Test = React.createClass({ - {this.state.show ?
-
-
- - logo -
-
    -
  • -
  • -
  • -
  • -
  • -
-
-
-
我是标题
+ {this.state.show ? +
  • @@ -51,7 +36,6 @@ var Test = React.createClass({
-
我是标题
@@ -59,13 +43,9 @@ var Test = React.createClass({
  • -
  • -
  • -
    -
    : null}
    diff --git a/components/enter-animation/demo/enter-data.md b/components/enter-animation/demo/enter-data.md index ae6106399e..8ca6b7ed2d 100644 --- a/components/enter-animation/demo/enter-data.md +++ b/components/enter-animation/demo/enter-data.md @@ -1,6 +1,6 @@ # 指定节点动画进出场 -- order: 2 +- order: 3 通过加上 `enter-data` 属性来指定需要动画进场的元素,并且可以定义每个元素的动画效果。 @@ -18,6 +18,7 @@ var Test = React.createClass({ interval: .1, }, leave: { + type:'left', interval: 0.03 }, show: true @@ -37,7 +38,6 @@ var Test = React.createClass({ {this.state.show ?
    -
    我是标题
    • @@ -45,7 +45,6 @@ var Test = React.createClass({
    -
    我是标题
    diff --git a/components/enter-animation/demo/enter-leave.md b/components/enter-animation/demo/enter-leave.md index f28539388e..858b127f9d 100644 --- a/components/enter-animation/demo/enter-leave.md +++ b/components/enter-animation/demo/enter-leave.md @@ -1,6 +1,6 @@ # 配置进出场的样式 -- order: 1 +- order: 2 配置进出场动画样式。 @@ -43,22 +43,8 @@ var Test = React.createClass({
    - {this.state.show ?
    -
    -
    - - logo -
    -
      -
    • -
    • -
    • -
    • -
    • -
    -
    -
    -
    我是标题
    + {this.state.show ? +
    • @@ -66,7 +52,6 @@ var Test = React.createClass({
    -
    我是标题
    @@ -74,13 +59,9 @@ var Test = React.createClass({
  • -
  • -
  • -
    -
    : null}
    diff --git a/components/enter-animation/demo/form.md b/components/enter-animation/demo/form.md index 91deeed21a..0b7b191e9f 100644 --- a/components/enter-animation/demo/form.md +++ b/components/enter-animation/demo/form.md @@ -1,6 +1,6 @@ # 表单动画进出场 -- order: 4 +- order: 6 表单组合的进场与出场动画。 @@ -26,6 +26,7 @@ var Test = React.createClass({ type: 'left', reverse: true, interval: 0.05, + ease:'cubic-bezier(0.55, 0.085, 0.68, 0.53)', callback: ()=> { console.log('出场结束') } diff --git a/components/enter-animation/demo/page.md b/components/enter-animation/demo/page.md new file mode 100644 index 0000000000..976be46fb6 --- /dev/null +++ b/components/enter-animation/demo/page.md @@ -0,0 +1,95 @@ +# 页面的进场和离场 + +- order: 5 + +页面的进场和离场。 + +--- + +````jsx +var EnterAnimation = antd.EnterAnimation; + +var Test = React.createClass({ + getInitialState() { + return { + show: true, + enter:{ + type:'right', + ease:'cubic-bezier(0.19, 1, 0.22, 1)' + }, + leave:{ + type:'left', + ease:'cubic-bezier(0.455, 0.03, 0.515, 0.955)', + reverse:true, + interval:0.05 + } + } + }, + onClick() { + this.setState({ + show: !this.state.show + }) + }, + render() { + return ( +
    +
    + +
    + + {this.state.show ?
    +
    +
    + + logo +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    +
    我是标题
    +
    +
      +
    • +
    • +
    • +
    +
    +
    我是标题
    +
    +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
    +
    +
    +
    +
    : null} +
    +
    + ); + } +}); + +React.render( +, document.getElementById('components-enter-animation-demo-page')); +```` + + diff --git a/components/enter-animation/demo/router.md b/components/enter-animation/demo/router.md index 472e156b42..2d54269549 100644 --- a/components/enter-animation/demo/router.md +++ b/components/enter-animation/demo/router.md @@ -1,6 +1,6 @@ # Router 默认进出场 -- order: 5 +- order: 7 router 组合的进场与出场动画。 @@ -8,7 +8,6 @@ router 组合的进场与出场动画。 ````jsx var ReactRouter = require('react-router'); -var history = require('react-router/lib/HashHistory').history; var Router = ReactRouter.Router; var Route = ReactRouter.Route; var Link = ReactRouter.Link; @@ -30,6 +29,9 @@ var App = React.createClass({ return (
    + + 首页 + Page 1 @@ -72,7 +74,7 @@ var Page2 = React.createClass({ } }); React.render(( - + diff --git a/components/enter-animation/demo/simple.md b/components/enter-animation/demo/simple.md new file mode 100644 index 0000000000..d96522f9dc --- /dev/null +++ b/components/enter-animation/demo/simple.md @@ -0,0 +1,27 @@ +# 默认 + +- order: 0 + +最简单的进场例子。 + +--- + +````jsx +var EnterAnimation = antd.EnterAnimation; + +React.render( + +
      +
    • 依次进场
    • +
    • 依次进场
    • +
    • 依次进场
    • +
    • 依次进场
    • +
    • 依次进场
    • +
    • 依次进场
    • +
    • 依次进场
    • +
    • 依次进场
    • +
    +
    +, document.getElementById('components-enter-animation-demo-simple')); +```` + diff --git a/components/enter-animation/demo/style.md b/components/enter-animation/demo/style.md index 7d2d5f14f6..fffe32fedb 100644 --- a/components/enter-animation/demo/style.md +++ b/components/enter-animation/demo/style.md @@ -1,6 +1,6 @@ # style 自定义样式动画进出场 -- order: 3 +- order: 4 通过加上属性里的 `style` 来自定义 CSS 动画进出场。 @@ -40,7 +40,6 @@ var Test = React.createClass({ {this.state.show ?
    -
    我是标题
    • @@ -48,7 +47,6 @@ var Test = React.createClass({
    -
    我是标题
    diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index 68661d14ef..d28f23290b 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -33,7 +33,7 @@ 如子节点有 `enter-data` 值,则只执行有 `enter-data` 的节点的动画,相反所有子节点上都没有 `enter-data` 值,则执行遍历 dom 下一级节点来执行动画。 ```html - +
    diff --git a/components/index.html b/components/index.html deleted file mode 100644 index a39aae6ca1..0000000000 --- a/components/index.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md new file mode 100644 index 0000000000..4ad28142bb --- /dev/null +++ b/components/menu/demo/sider-current.md @@ -0,0 +1,64 @@ +# 只展开当前父级菜单 + +- order: 2 + +点击菜单,收起其他展开的所有菜单,保持菜单聚焦简洁。 + +--- + +````jsx +var Menu = antd.Menu; +var SubMenu = Menu.SubMenu; + +var Sider = React.createClass({ + getInitialState() { + return { + current: '1', + openKeys: [] + } + }, + handleClick(e) { + console.log('click ', e); + this.setState({ + current: e.key, + openKeys: e.keyPath.slice(1) + }); + }, + onToggle(info){ + this.setState({ + openKeys: info.openKeys + }); + }, + render() { + return + 导航一}> + 选项1 + 选项2 + 选项3 + 选项4 + + 导航二}> + 选项5 + 选项6 + + 选项7 + 选项8 + + + 导航三}> + 选项9 + 选项10 + 选项11 + 选项12 + + ; + } +}); +React.render(, document.getElementById('components-menu-demo-sider-current')); +```` diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md index faab265c83..c0f4d15190 100644 --- a/components/menu/demo/vertical.md +++ b/components/menu/demo/vertical.md @@ -1,6 +1,6 @@ # 垂直菜单 -- order: 2 +- order: 3 子菜单是弹出的形式。 diff --git a/components/table/index.jsx b/components/table/index.jsx index 90d37f574e..0d76cf2d01 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -473,12 +473,14 @@ let AntTable = React.createClass({ return column; }); let emptyText; + let emptyClass = ''; if (!data || data.length === 0) { - emptyText =
    + emptyText =
    暂无数据
    ; + emptyClass = ' ant-table-empty'; } - return
    + return
    .versions { font-weight: bold; diff --git a/package.json b/package.json index ea3c8659f9..8d702aa306 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.9.1-beta1", + "version": "0.9.1-beta4", "stableVersion": "0.9.0", "title": "Ant Design", "description": "一个 UI 设计语言", @@ -33,7 +33,7 @@ "license": "MIT", "dependencies": { "css-animation": "~1.1.0", - "enter-animation": "~0.4.9", + "enter-animation": "~0.5.0", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~4.0.1", @@ -45,7 +45,7 @@ "rc-dropdown": "~1.3.3", "rc-form-validation": "~2.4.7", "rc-input-number": "~2.0.1", - "rc-menu": "~4.4.2", + "rc-menu": "~4.6.0", "rc-notification": "~1.1.0", "rc-pagination": "~1.1.0", "rc-progress": "~1.0.0", @@ -66,7 +66,7 @@ "velocity-animate": "~1.2.2" }, "devDependencies": { - "autoprefixer-loader": "^2.0.0", + "autoprefixer-loader": "^3.1.0", "babel": "^5.8.12", "babel-core": "^5.8.12", "babel-eslint": "^4.1.0", @@ -87,7 +87,7 @@ "lodash": "^3.10.0", "nico-jsx": "~0.5.8", "precommit-hook": "^1.0.7", - "react-router": "1.0.0-beta3", + "react-router": "1.0.0-rc1", "webpack": "^1.10.1", "webpack-dev-middleware": "^1.2.0" }, diff --git a/scripts/demo.js b/scripts/demo.js index ca91d6f079..d4671e2b24 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -1,6 +1,5 @@ window['css-animation'] = require('css-animation'); window['react-router'] = require('react-router'); -window['react-router']['HashHistory'] = require('react-router/lib/HashHistory'); var antd = require('antd'); var $ = require('jquery'); diff --git a/spec/easing.md b/spec/easing.md index 0cfb404c7e..b3404c3149 100644 --- a/spec/easing.md +++ b/spec/easing.md @@ -2,6 +2,8 @@ - category: 动画 - order: 0 +- noinstant: true + --- diff --git a/style/components/datepicker/DecadePanel.less b/style/components/datepicker/DecadePanel.less index 1cde83a41c..b43e5bc9ec 100644 --- a/style/components/datepicker/DecadePanel.less +++ b/style/components/datepicker/DecadePanel.less @@ -7,6 +7,7 @@ z-index: 10; position: absolute; outline: none; + border-radius: @border-radius-base; } .@{calendar-prefix-cls}-decade-panel-hidden { diff --git a/style/components/datepicker/MonthPanel.less b/style/components/datepicker/MonthPanel.less index 24c91a5dd1..9207437a6d 100644 --- a/style/components/datepicker/MonthPanel.less +++ b/style/components/datepicker/MonthPanel.less @@ -7,6 +7,7 @@ z-index: 10; position: absolute; outline: none; + border-radius: @border-radius-base; } .@{calendar-prefix-cls}-month-panel-hidden { diff --git a/style/components/datepicker/TimePanel.less b/style/components/datepicker/TimePanel.less index 08869c1beb..b9e638ae3c 100644 --- a/style/components/datepicker/TimePanel.less +++ b/style/components/datepicker/TimePanel.less @@ -8,6 +8,7 @@ position: absolute; outline: none; border-radius: 6px; + border-radius: @border-radius-base; } .@{calendar-prefix-cls}-time-panel-header { diff --git a/style/components/datepicker/YearPanel.less b/style/components/datepicker/YearPanel.less index 862465f94f..8d323d6ad7 100644 --- a/style/components/datepicker/YearPanel.less +++ b/style/components/datepicker/YearPanel.less @@ -7,6 +7,7 @@ z-index: 10; position: absolute; outline: none; + border-radius: @border-radius-base; } .@{calendar-prefix-cls}-year-panel-hidden { diff --git a/style/components/dialog/Mask.less b/style/components/dialog/Mask.less index 42f9cc1fc2..0272e2a5a5 100644 --- a/style/components/dialog/Mask.less +++ b/style/components/dialog/Mask.less @@ -17,35 +17,4 @@ filter: alpha(opacity=50); } - &-wrap-hidden > &-mask&-fade-enter, - &-wrap-hidden > &-mask&-fade-leave { - display: block; - } - - .fade-effect() { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-timing-function: @ease-in; - } - - &-fade-enter { - opacity: 0; - .fade-effect(); - animation-play-state: paused; - } - - &-fade-leave { - .fade-effect(); - animation-play-state: paused; - } - - &-fade-enter&-fade-enter-active { - animation-name: fadeIn; - animation-play-state: running; - } - - &-fade-leave&-fade-leave-active { - animation-name: fadeOut; - animation-play-state: running; - } } diff --git a/style/components/form.less b/style/components/form.less index eaf59450de..4d4511a2d6 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -67,6 +67,7 @@ input[type="checkbox"] { // Form items // You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing .@{css-prefix}form-item { + font-size: @font-size-base; margin-bottom: @form-item-margin-bottom; color: #666; @@ -111,10 +112,6 @@ input[type="checkbox"] { // 表单下的输入框尺寸唯一: 大尺寸 form { - * { - font-size: @font-size-base; - line-height: @line-height-base; - } .has-feedback { .@{iconfont-css-prefix} { .square(@input-height-lg); diff --git a/style/components/menu.less b/style/components/menu.less index 8165f3a1b6..10e98f23d8 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -10,6 +10,7 @@ box-shadow: @overlay-shadow; border-radius: @border-radius-base; color: @text-color; + background: #fff; &-item-group-list { margin: 0; diff --git a/style/components/table.less b/style/components/table.less index f4ca488567..878e944b99 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -7,7 +7,10 @@ .@{table-prefix-cls} { font-size: @font-size-base; color: @text-color; - transition: opacity 0.3s ease; + + &-body { + transition: opacity 0.3s ease; + } table { width: 100%; @@ -77,10 +80,10 @@ } &-loading { - .ant-table-body { + position: relative; + .@{table-prefix-cls}-body { opacity: 0.42; } - position: relative; &:after { position: absolute; display: inline-block; @@ -179,13 +182,25 @@ } &-empty { + position: relative; + margin-bottom: 16px; + } + + &-empty &-body { + height: 150px; + } + + &-placeholder { height: 100px; line-height: 100px; text-align: center; font-size: 12px; color: #999; border-bottom: 1px solid #E9E9E9; - margin-bottom: 16px; + position: absolute; + top: 50px; + left: 0; + width: 100%; .anticon { margin-right: 4px; position: relative; @@ -239,7 +254,7 @@ width: 18px; height: 18px; text-align: center; - line-height: 16px; + line-height: 15px; border: 1px solid #E9E9E9; -webkit-user-select: none; user-select: none; diff --git a/style/core/motion/fade.less b/style/core/motion/fade.less index 22695741ec..8a5cfb6861 100644 --- a/style/core/motion/fade.less +++ b/style/core/motion/fade.less @@ -1,27 +1,18 @@ -.fade-enter, .fade-appear { - opacity: 0; - .motion-common(); - animation-timing-function: linear; - animation-play-state: paused; +.fade-motion(@className, @keyframeName) { + .make-motion(@className, @keyframeName); + .@{className}-enter, .@{className}-appear { + opacity: 0; + animation-timing-function: linear; + } + .@{className}-leave { + animation-timing-function: linear; + } } -.fade-leave { - .motion-common(); - animation-timing-function: linear; - animation-play-state: paused; -} +.fade-motion(fade, antFade); +.fade-motion(ant-modal-fade, antFade); -.fade-enter.fade-enter-active, .fade-appear.fade-appear-active { - animation-name: fadeIn; - animation-play-state: running; -} - -.fade-leave.fade-leave-active { - animation-name: fadeOut; - animation-play-state: running; -} - -@keyframes fadeIn { +@keyframes antFadeIn { 0% { opacity: 0; } @@ -30,7 +21,7 @@ } } -@keyframes fadeOut { +@keyframes antFadeOut { 0% { opacity: 1; } diff --git a/style/core/motion/move.less b/style/core/motion/move.less index bab9620489..dae559bafc 100644 --- a/style/core/motion/move.less +++ b/style/core/motion/move.less @@ -9,12 +9,12 @@ } } -.move-motion(move-up, moveUp); -.move-motion(move-down, moveDown); -.move-motion(move-left, moveLeft); -.move-motion(move-right, moveRight); +.move-motion(move-up, antMoveUp); +.move-motion(move-down, antMoveDown); +.move-motion(move-left, antMoveLeft); +.move-motion(move-right, antMoveRight); -@keyframes moveDownIn { +@keyframes antMoveDownIn { 0% { transform-origin: 0 0; transform: translateY(100%); @@ -27,7 +27,7 @@ } } -@keyframes moveDownOut { +@keyframes antMoveDownOut { 0% { transform-origin: 0 0; transform: translateY(0%); @@ -40,7 +40,7 @@ } } -@keyframes moveLeftIn { +@keyframes antMoveLeftIn { 0% { transform-origin: 0 0; transform: translateX(-100%); @@ -53,7 +53,7 @@ } } -@keyframes moveLeftOut { +@keyframes antMoveLeftOut { 0% { transform-origin: 0 0; transform: translateX(0%); @@ -66,7 +66,7 @@ } } -@keyframes moveRightIn { +@keyframes antMoveRightIn { 0% { opacity: 0; transform-origin: 0 0; @@ -79,7 +79,7 @@ } } -@keyframes moveRightOut { +@keyframes antMoveRightOut { 0% { transform-origin: 0 0; transform: translateX(0%); @@ -92,7 +92,7 @@ } } -@keyframes moveUpIn { +@keyframes antMoveUpIn { 0% { transform-origin: 0 0; transform: translateY(-100%); @@ -105,7 +105,7 @@ } } -@keyframes moveUpOut { +@keyframes antMoveUpOut { 0% { transform-origin: 0 0; transform: translateY(0%); diff --git a/style/core/motion/slide.less b/style/core/motion/slide.less index 67e4bafa9a..097494f334 100644 --- a/style/core/motion/slide.less +++ b/style/core/motion/slide.less @@ -9,12 +9,12 @@ } } -.slide-motion(slide-up, slideUp); -.slide-motion(slide-down, slideDown); -.slide-motion(slide-left, slideLeft); -.slide-motion(slide-right, slideRight); +.slide-motion(slide-up, antSlideUp); +.slide-motion(slide-down, antSlideDown); +.slide-motion(slide-left, antSlideLeft); +.slide-motion(slide-right, antSlideRight); -@keyframes slideUpIn { +@keyframes antSlideUpIn { 0% { opacity: 0; transform-origin: 0% 0%; @@ -27,7 +27,7 @@ } } -@keyframes slideUpOut { +@keyframes antSlideUpOut { 0% { opacity: 1; transform-origin: 0% 0%; @@ -40,7 +40,7 @@ } } -@keyframes slideDownIn { +@keyframes antSlideDownIn { 0% { opacity: 0; transform-origin: 100% 100%; @@ -53,7 +53,7 @@ } } -@keyframes slideDownOut { +@keyframes antSlideDownOut { 0% { opacity: 1; transform-origin: 100% 100%; @@ -66,7 +66,7 @@ } } -@keyframes slideLeftIn { +@keyframes antSlideLeftIn { 0% { opacity: 0; transform-origin: 0% 0%; @@ -79,7 +79,7 @@ } } -@keyframes slideLeftOut { +@keyframes antSlideLeftOut { 0% { opacity: 1; transform-origin: 0% 0%; @@ -92,7 +92,7 @@ } } -@keyframes slideRightIn { +@keyframes antSlideRightIn { 0% { opacity: 0; transform-origin: 100% 0%; @@ -105,7 +105,7 @@ } } -@keyframes slideRightOut { +@keyframes antSlideRightOut { 0% { opacity: 1; transform-origin: 100% 0%; diff --git a/style/core/motion/swing.less b/style/core/motion/swing.less index f48ebcff82..2b6f0ffaaf 100644 --- a/style/core/motion/swing.less +++ b/style/core/motion/swing.less @@ -9,9 +9,9 @@ } } -.swing-motion(swing, swing); +.swing-motion(swing, antSwing); -@keyframes swingIn { +@keyframes antSwingIn { 0%, 100% { transform: translateX(0px); } diff --git a/style/core/motion/zoom.less b/style/core/motion/zoom.less index 3fef410682..f03a738928 100644 --- a/style/core/motion/zoom.less +++ b/style/core/motion/zoom.less @@ -9,14 +9,14 @@ } } -.zoom-motion(zoom, zoom); -.zoom-motion(zoom-big, zoomBig); -.zoom-motion(zoom-up, zoomUp); -.zoom-motion(zoom-down, zoomDown); -.zoom-motion(zoom-left, zoomLeft); -.zoom-motion(zoom-right, zoomRight); +.zoom-motion(zoom, antZoom); +.zoom-motion(zoom-big, antZoomBig); +.zoom-motion(zoom-up, antZoomUp); +.zoom-motion(zoom-down, antZoomDown); +.zoom-motion(zoom-left, antZoomLeft); +.zoom-motion(zoom-right, antZoomRight); -@keyframes zoomIn { +@keyframes antZoomIn { 0% { opacity: 0; transform: scale(0); @@ -26,7 +26,7 @@ } } -@keyframes zoomOut { +@keyframes antZoomOut { 0% { transform: scale(1); } @@ -35,7 +35,7 @@ transform: scale(0); } } -@keyframes zoomBigIn { +@keyframes antZoomBigIn { 0% { opacity: 0; transform: scale(.8); @@ -45,7 +45,7 @@ } } -@keyframes zoomBigOut { +@keyframes antZoomBigOut { 0% { transform: scale(1); } @@ -55,7 +55,7 @@ } } -@keyframes zoomUpIn { +@keyframes antZoomUpIn { 0% { opacity: 0; transform-origin: 50% 0%; @@ -67,7 +67,7 @@ } } -@keyframes zoomUpOut { +@keyframes antZoomUpOut { 0% { transform-origin: 50% 0%; transform: scale(1); @@ -79,7 +79,7 @@ } } -@keyframes zoomLeftIn { +@keyframes antZoomLeftIn { 0% { opacity: 0; transform-origin: 0% 50%; @@ -91,7 +91,7 @@ } } -@keyframes zoomLeftOut { +@keyframes antZoomLeftOut { 0% { transform-origin: 0% 50%; transform: scale(1); @@ -103,7 +103,7 @@ } } -@keyframes zoomRightIn { +@keyframes antZoomRightIn { 0% { opacity: 0; transform-origin: 100% 50%; @@ -115,7 +115,7 @@ } } -@keyframes zoomRightOut { +@keyframes antZoomRightOut { 0% { transform-origin: 100% 50%; transform: scale(1); @@ -127,7 +127,7 @@ } } -@keyframes zoomDownIn { +@keyframes antZoomDownIn { 0% { opacity: 0; transform-origin: 50% 100%; @@ -139,7 +139,7 @@ } } -@keyframes zoomDownOut { +@keyframes antZoomDownOut { 0% { transform-origin: 50% 100%; transform: scale(1);