diff --git a/packages/transition/index.wxml b/packages/transition/index.wxml
index 412e8afc..27437852 100644
--- a/packages/transition/index.wxml
+++ b/packages/transition/index.wxml
@@ -1,7 +1,9 @@
+<wxs src="./index.wxs" module="computed" />
+
 <view
   wx:if="{{ inited }}"
   class="van-transition custom-class {{ classes }}"
-  style="-webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }} {{ customStyle }}"
+  style="{{ computed.rootStyle({ currentDuration, display, customStyle }) }}"
   bind:transitionend="onTransitionEnd"
 >
   <slot />
diff --git a/packages/transition/index.wxs b/packages/transition/index.wxs
new file mode 100644
index 00000000..e0babf62
--- /dev/null
+++ b/packages/transition/index.wxs
@@ -0,0 +1,17 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function rootStyle(data) {
+  return style([
+    {
+      '-webkit-transition-duration': data.currentDuration + 'ms',
+      'transition-duration': data.currentDuration + 'ms',
+    },
+    data.display ? null : 'display: none',
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};