From fbb7a99a9e9415f888430086443c8092fd07823e Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 28 Jul 2015 15:42:43 +0800 Subject: [PATCH] updata --- components/enter-animation/demo/basic.md | 69 +----------------------- components/enter-animation/demo/label.md | 68 +---------------------- components/enter-animation/index.md | 20 +++---- package.json | 2 +- 4 files changed, 15 insertions(+), 144 deletions(-) diff --git a/components/enter-animation/demo/basic.md b/components/enter-animation/demo/basic.md index bbb609d135..7cfdd70f21 100644 --- a/components/enter-animation/demo/basic.md +++ b/components/enter-animation/demo/basic.md @@ -2,7 +2,7 @@ - order: 0 -模拟页面demo;子节点控制进场;`EnterAnimation`里延时1秒`enter-data`用到的参数：`type` `queueId` `delay`; +模拟页面demo，子节点控制进场。`EnterAnimation` 里延时1秒`enter-data` 用到的参数：`type` `queueId` `delay`。 --- @@ -107,7 +107,7 @@ React.render( , document.getElementById('components-enter-animation-demo- line-height: 32px; } .demo-startAnim .demo-header .logo img{ -margin:auto + margin:auto } .demo-startAnim .demo-header .logo span { display: block; @@ -227,69 +227,4 @@ margin:auto display: block; content: ""; } -a.logo { - float: left; - height: 46px; - line-height: 46px; - margin: 17px 45px; - transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); - text-transform: uppercase; - font-size: 18px; - font-family: "Raleway", "Helvetica Neue", Helvetica, "Lantinghei SC", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", SimSun, sans-serif; - font-weight: 500; - color: #6EB4E0; -} -a.logo img { - float: left; - -webkit-animation: rotateCircleBack 0.6s 1 ease-in-out; - animation: rotateCircleBack 0.6s 1 ease-in-out; -} -.test { - opacity: 0; - -webkit-animation: TTest 0.5s ease-out; - animation: TTest 0.5s ease-out; -} -@-webkit-keyframes TTest { - 0% { - opacity: 0; - } - 0%, - 100% { - -webkit-transform: translateX(0px); - transform: translateX(0px); - } - 20%, - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - transform: translateX(30px); - } - 40%, - 80% { - -webkit-transform: translateX(-30px); - transform: translateX(-30px); - } -} -@keyframes TTest { - 0% { - opacity: 0; - } - 0%, - 100% { - -webkit-transform: translateX(0px); - transform: translateX(0px); - } - 20%, - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - transform: translateX(30px); - } - 40%, - 80% { - -webkit-transform: translateX(-30px); - transform: translateX(-30px); - } -} - diff --git a/components/enter-animation/demo/label.md b/components/enter-animation/demo/label.md index 002ca072c8..3f21963f28 100644 --- a/components/enter-animation/demo/label.md +++ b/components/enter-animation/demo/label.md @@ -2,7 +2,7 @@ - order: 1 -主标签上控制进场;`EnterAnimation`里延时1秒;递增`interval`为0.2; +主标签上控制进场, `EnterAnimation` 里延时1秒,递增`interval`为0.2; --- @@ -107,7 +107,7 @@ React.render( , document.getElementById('components-enter-animation-demo- line-height: 32px; } .demo-startAnim .demo-header .logo img{ -margin:auto + margin:auto } .demo-startAnim .demo-header .logo span { display: block; @@ -227,69 +227,5 @@ margin:auto display: block; content: ""; } -a.logo { - float: left; - height: 46px; - line-height: 46px; - margin: 17px 45px; - transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); - text-transform: uppercase; - font-size: 18px; - font-family: "Raleway", "Helvetica Neue", Helvetica, "Lantinghei SC", "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", SimSun, sans-serif; - font-weight: 500; - color: #6EB4E0; -} -a.logo img { - float: left; - -webkit-animation: rotateCircleBack 0.6s 1 ease-in-out; - animation: rotateCircleBack 0.6s 1 ease-in-out; -} -.test { - opacity: 0; - -webkit-animation: TTest 0.5s ease-out; - animation: TTest 0.5s ease-out; -} -@-webkit-keyframes TTest { - 0% { - opacity: 0; - } - 0%, - 100% { - -webkit-transform: translateX(0px); - transform: translateX(0px); - } - 20%, - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - transform: translateX(30px); - } - 40%, - 80% { - -webkit-transform: translateX(-30px); - transform: translateX(-30px); - } -} -@keyframes TTest { - 0% { - opacity: 0; - } - 0%, - 100% { - -webkit-transform: translateX(0px); - transform: translateX(0px); - } - 20%, - 60% { - opacity: 1; - -webkit-transform: translateX(30px); - transform: translateX(30px); - } - 40%, - 80% { - -webkit-transform: translateX(-30px); - transform: translateX(-30px); - } -} diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index c09c73259c..22a9ddb664 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -24,10 +24,10 @@ |参数 |类型 |默认值 |详细 | |-----------------|-------|-------------|----------------------------------------------------| -|type |string |right |执行动画的内置参数; | -|style |string |null |同上，style的样式动画,`type`有值，此项无效;| -|delay |number |0 |整个区块的延时;以秒为单位| -|interval |number |0.1 |递增延时值;以秒为单位| +|type |string |right |执行动画的内置参数 | +|style |string |null |同上，style的样式动画,`type`有值，此项无效| +|delay |number |0 |整个区块的延时，以秒为单位| +|interval |number |0.1 |递增延时值，以秒为单位| ### dom子标签下： @@ -41,13 +41,13 @@ |-----------------|-----------------|----------------|----------------------------------------------------| |type |string |right |内置动画样式：
`left` `right` `top` `bottom` `scale` `scaleFrom` `scaleX` `scaleY`;| |style |string |null |style样式，如transform: translateX(100px),每个样式必须以;结束；`type`有值此项无效| -|direction |string |"enter" |动画进场或出场样式,以`enter` `leave`两值;默认为`enter`,| -|duration |number |0.5 |动画的时间,以秒为单位；| -|ease |string |cubic-bezier(0.165, 0.84, 0.44, 1);|样式缓动，只支持css样式缓动;| -|delay |number |0 |动画的延时;默认0,依照结构递增以上的`interval`| +|direction |string |"enter" |动画进场或出场样式,以 `enter` `leave`两值;默认为 `enter`| +|duration |number |0.5 |动画的时间,以秒为单位| +|ease |string |cubic-bezier(0.165, 0.84, 0.44, 1)|样式缓动，只支持css样式缓动| +|delay |number |0 |动画的延时，依照结构递增以上的`interval`| |queueId |number |0 |动画的线程| -注：如子节点有`enter-data`值，则只执行有`enter-data`的节点的动画，相反所有子节点上都没有`enter-data`值，则执行遍历dom下一级节点来执行动画; +注：如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。 -如果标签上的`enter-data`没`type`||`style`，则执行`EnterAnimation`标签上的`type`||`style`; +如果标签上的 `enter-data` 没 `type` || `style` ，则执行 `EnterAnimation` 标签上的 `type` || `style`。 diff --git a/package.json b/package.json index 49ed2a9ec2..04d2e7b98f 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ ], "license": "MIT", "dependencies": { - "enter-animation": "^0.1.1", + "enter-animation": "~0.1.1", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "object-assign": "~3.0.0",