From ce8463ce09c734de336813d5775603b9259abbc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E6=96=87=E6=9D=B0?= <619883736@qq.com>
Date: Thu, 31 May 2018 16:52:58 +0800
Subject: [PATCH] feat:add story inner aniamte-in type (#1170)
---
src/mip-story/README.md | 24 +++++----
src/mip-story/animate-preset.js | 89 +++++++++++++++++++++++++++++++++
src/mip-story/package.json | 4 +-
3 files changed, 105 insertions(+), 12 deletions(-)
diff --git a/src/mip-story/README.md b/src/mip-story/README.md
index bf6bbd74d..4dbacfb0e 100644
--- a/src/mip-story/README.md
+++ b/src/mip-story/README.md
@@ -67,17 +67,17 @@
- 小故事是什么？
- 快用 MIP 小故事开发很多丰富的交互效果吧！
+ 小故事是什么？
+ 快用 MIP 小故事开发很多丰富的交互效果吧！
普通跳转链接
-
+
- 用 MIP 来讲述你的故事！
+ 用 MIP 来讲述你的故事！
@@ -140,19 +140,23 @@
| animate-in | 说明 |
| ----------------- | ------ |
| `fade-in` | 淡入 |
-| `fly-in-top` | 上侧滑入 |
-| `fly-in-bottom` | 下侧滑入 |
-| `fly-in-left` | 左侧滑入 |
-| `fly-in-right` | 右侧滑入 |
+| `fly-in-top` | 上侧飞入 |
+| `fly-in-bottom` | 下侧飞入 |
+| `fly-in-left` | 左侧飞入 |
+| `fly-in-right` | 右侧飞入 |
+| `fade-in-top` | 上侧淡入 |
+| `fade-in-bottom` | 下侧淡入 |
+| `fade-in-left` | 左侧淡入 |
+| `fade-in-right` | 右侧淡入 |
| `twirl-in` | 旋转进入 |
| `whoosh-in-left` | 左侧放大飞入 |
| `whoosh-in-right` | 右侧放大飞入 |
| `rotate-in-left` | 左侧旋转飞入 |
| `rotate-in-right` | 右侧旋转飞入 |
-`animate-in-duration` : 元素动画的持续事件；可以取得值为正整数，单位为毫秒；
+`animate-in-duration` : 元素动画的持续时间，默认单位为毫秒，可取值为300、300ms、0.3s，以上都代表动画持续时间为300ms；
-`animate-in-delay` : 元素动画开始前的延迟时间，可以取得值为正整数，单位为毫秒
+`animate-in-delay` : 元素动画开始前的延迟时间，默认单位为毫秒，可取值为300、300ms、0.3s，以上都代表动画开始前延迟时间为300ms；
`animate-in-after` ：指定动画在另一个元素动画结束之后触发；可以的取值为带有动画元素的id
diff --git a/src/mip-story/animate-preset.js b/src/mip-story/animate-preset.js
index b3d4b2c81..2d98232e3 100644
--- a/src/mip-story/animate-preset.js
+++ b/src/mip-story/animate-preset.js
@@ -84,6 +84,95 @@ define(function (require) {
];
}
},
+ 'fade-in-top': {
+ duration: 500,
+ easing: 'ease-in',
+ delay: 0,
+ keyframes: function (offset) {
+ var offsetY = -50;
+ return [
+ {
+ opacity: 0,
+ transform: 'translate3d(0, ' + offsetY + 'px, 0)'
+ },
+ {
+ opacity: 1,
+ transform: 'translate3d(0, 0, 0)'
+ }
+ ];
+ }
+ },
+ 'fade-in-bottom': {
+ duration: 500,
+ easing: 'ease-in',
+ delay: 0,
+ keyframes: function (offset) {
+ var offsetY = 50;
+ return [
+ {
+ opacity: 0,
+ transform: 'translate3d(0, ' + offsetY + 'px, 0)'
+ },
+ {
+ opacity: 1,
+ transform: 'translate3d(0, 0, 0)'
+ }
+ ];
+ }
+ },
+ 'fade-in-left': {
+ duration: 500,
+ delay: 0,
+ easing: 'ease-in',
+ keyframes: function (offset) {
+ var offsetX = -50;
+ return [
+ {
+ opacity: 0,
+ transform: 'translate3d(' + offsetX + 'px, 0, 0)'
+ },
+ {
+ opacity: 1,
+ transform: 'translate3d(0, 0, 0)'
+ }
+ ];
+ }
+ },
+ 'fade-in-right': {
+ duration: 500,
+ delay: 0,
+ easing: 'ease-in',
+ keyframes: function (offset) {
+ var offsetX = 50;
+ return [
+ {
+ opacity: 0,
+ transform: 'translate3d(' + offsetX + 'px, 0, 0)'
+ },
+ {
+ opacity: 1,
+ transform: 'translate3d(0, 0, 0)'
+ }
+ ];
+ }
+ },
+ 'scale-in': {
+ duration: 1000,
+ delay: 0,
+ easing: 'linear',
+ keyframes: function (offset) {
+ var offsetX = 50;
+ return [
+ {
+ transform: 'scale(1)',
+ },
+ {
+ transform: 'scale(1.1)'
+ }
+ ];
+ }
+ },
+
'twirl-in': {
duration: 1000,
delay: 0,
diff --git a/src/mip-story/package.json b/src/mip-story/package.json
index 2db6f88fa..d15fd7eca 100644
--- a/src/mip-story/package.json
+++ b/src/mip-story/package.json
@@ -1,7 +1,7 @@
{
"name": "mip-story",
- "version": "1.0.12",
- "description": "组件介绍",
+ "version": "1.0.13",
+ "description": "一种展现移动原生优质内容的富媒体产品组件",
"contributors": [
{
"name": "Jackson",