diff --git a/example/app.json b/example/app.json
index ca9c7c9e..1c7b9af5 100644
--- a/example/app.json
+++ b/example/app.json
@@ -146,6 +146,7 @@
"van-toast": "./dist/toast/index",
"van-toast-demo": "./dist/toast/demo/index",
"van-transition": "./dist/transition/index",
+ "van-transition-demo": "./dist/transition/demo/index",
"van-tree-select": "./dist/tree-select/index",
"van-tree-select-demo": "./dist/tree-select/demo/index",
"van-datetime-picker": "./dist/datetime-picker/index",
diff --git a/example/pages/transition/index.js b/example/pages/transition/index.js
index d4cf8efd..cc11dfda 100644
--- a/example/pages/transition/index.js
+++ b/example/pages/transition/index.js
@@ -1,84 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- show: false,
- name: 'fade',
- showCustom: false
- },
-
- onClickFade() {
- this.trigger('fade');
- },
-
- onClickFadeUp() {
- this.trigger('fade-up');
- },
-
- onClickFadeDown() {
- this.trigger('fade-down');
- },
-
- onClickFadeLeft() {
- this.trigger('fade-left');
- },
-
- onClickFadeRight() {
- this.trigger('fade-right');
- },
-
- onClickSlideUp() {
- this.trigger('slide-up');
- },
-
- onClickSlideDown() {
- this.trigger('slide-down');
- },
-
- onClickSlideLeft() {
- this.trigger('slide-left');
- },
-
- onClickSlideRight() {
- this.trigger('slide-right');
- },
-
- trigger(name) {
- this.setData({ name, show: true });
- setTimeout(() => {
- this.setData({ show: false });
- }, 500);
- },
-
- onClickCustom() {
- this.setData({ showCustom: true });
-
- setTimeout(() => {
- this.setData({ showCustom: false });
- }, 1000);
- },
-
- onBeforeEnter() {
- console.log('before enter');
- },
-
- onEnter() {
- console.log('enter');
- },
-
- onAfterEnter() {
- console.log('after enter');
- },
-
- onBeforeLeave() {
- console.log('before leave');
- },
-
- onLeave() {
- console.log('leave');
- },
-
- onAfterLeave() {
- console.log('after leave');
- },
-});
+Page();
diff --git a/example/pages/transition/index.wxml b/example/pages/transition/index.wxml
index fa613cc1..5cc62eea 100644
--- a/example/pages/transition/index.wxml
+++ b/example/pages/transition/index.wxml
@@ -1,35 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/packages/transition/demo/index.json b/packages/transition/demo/index.json
new file mode 100644
index 00000000..a2909bb8
--- /dev/null
+++ b/packages/transition/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-cell": "../../cell/index",
+ "van-transition": "../../transition/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/transition/index.wxss b/packages/transition/demo/index.less
similarity index 100%
rename from example/pages/transition/index.wxss
rename to packages/transition/demo/index.less
diff --git a/packages/transition/demo/index.ts b/packages/transition/demo/index.ts
new file mode 100644
index 00000000..acb1eba7
--- /dev/null
+++ b/packages/transition/demo/index.ts
@@ -0,0 +1,86 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ show: false,
+ name: 'fade',
+ showCustom: false,
+ },
+
+ methods: {
+ onClickFade() {
+ this.trigger('fade');
+ },
+
+ onClickFadeUp() {
+ this.trigger('fade-up');
+ },
+
+ onClickFadeDown() {
+ this.trigger('fade-down');
+ },
+
+ onClickFadeLeft() {
+ this.trigger('fade-left');
+ },
+
+ onClickFadeRight() {
+ this.trigger('fade-right');
+ },
+
+ onClickSlideUp() {
+ this.trigger('slide-up');
+ },
+
+ onClickSlideDown() {
+ this.trigger('slide-down');
+ },
+
+ onClickSlideLeft() {
+ this.trigger('slide-left');
+ },
+
+ onClickSlideRight() {
+ this.trigger('slide-right');
+ },
+
+ trigger(name) {
+ this.setData({ name, show: true });
+ setTimeout(() => {
+ this.setData({ show: false });
+ }, 500);
+ },
+
+ onClickCustom() {
+ this.setData({ showCustom: true });
+
+ setTimeout(() => {
+ this.setData({ showCustom: false });
+ }, 1000);
+ },
+
+ onBeforeEnter() {
+ console.log('before enter');
+ },
+
+ onEnter() {
+ console.log('enter');
+ },
+
+ onAfterEnter() {
+ console.log('after enter');
+ },
+
+ onBeforeLeave() {
+ console.log('before leave');
+ },
+
+ onLeave() {
+ console.log('leave');
+ },
+
+ onAfterLeave() {
+ console.log('after leave');
+ },
+ },
+});
diff --git a/packages/transition/demo/index.wxml b/packages/transition/demo/index.wxml
new file mode 100644
index 00000000..fa613cc1
--- /dev/null
+++ b/packages/transition/demo/index.wxml
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/transition/test/__snapshots__/demo.spec.ts.snap b/packages/transition/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..1d19b3f5
--- /dev/null
+++ b/packages/transition/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,343 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+ Fade
+
+
+
+
+
+
+
+
+
+
+ Fade Up
+
+
+
+
+
+
+
+
+
+
+ Fade Down
+
+
+
+
+
+
+
+
+
+
+ Fade Left
+
+
+
+
+
+
+
+
+
+
+ Fade Right
+
+
+
+
+
+
+
+
+
+
+ Slide Up
+
+
+
+
+
+
+
+
+
+
+ Slide Down
+
+
+
+
+
+
+
+
+
+
+ Slide Left
+
+
+
+
+
+
+
+
+
+
+ Slide Right
+
+
+
+
+
+
+
+
+
+
+ Custom
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/transition/test/demo.spec.ts b/packages/transition/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/transition/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+ const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+ rootPath: path.resolve(__dirname, '../../'),
+ });
+ const comp = simulate.render(id);
+ comp.attach(document.createElement('parent-wrapper'));
+ expect(comp.toJSON()).toMatchSnapshot();
+});