init

xhs-mini-demos/component-case/event-transition/event-transition.css

@@ -0,0 +1,13 @@
+.width-transition {
+  width: 100px;
+  height: 50px;
+  background: blue;
+  transition: width 2s;
+  -moz-transition: width 2s; /* Firefox 4 */
+  -webkit-transition: width 2s; /* Safari and Chrome */
+  -o-transition: width 2s;
+}
+
+.width-transition:hover {
+  width: 300px;
+}

xhs-mini-demos/component-case/event-transition/event-transition.js

@@ -0,0 +1,15 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'view',
+      path: 'page/component/pages/event-transition/event-transition',
+    };
+  },
+
+  onTransitionStart() {
+    console.log('1111111 onTransitionStart');
+  },
+  onTransitionEnd() {
+    console.log('222222 onTransitionEnd');
+  },
+});

xhs-mini-demos/component-case/event-transition/event-transition.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "event-transition"
+}

xhs-mini-demos/component-case/event-transition/event-transition.xhsml

@@ -0,0 +1,65 @@
+<view class="container">
+  <view class="page-body">
+      <view
+        class="width-transition"
+        bindtransitionstart="onTransitionStart"
+        bindtransitionend="onTransitionEnd"
+      >
+        view
+      </view>
+
+      <view class="btn-area">
+        <button
+          class="width-transition"
+          bindtransitionstart="onTransitionStart"
+          bindtransitionend="onTransitionEnd"
+        >
+          button
+        </button>
+      </view>
+
+      <view>
+        icon
+        <icon
+          type="success"
+          class="width-transition"
+          bindtransitionstart="onTransitionStart"
+          bindtransitionend="onTransitionEnd"
+        >
+        </icon>
+      </view>
+
+      <view>
+        image
+
+        <image
+          src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"
+          class="width-transition"
+          bindtransitionstart="onTransitionStart"
+          bindtransitionend="onTransitionEnd"
+        >
+        </image>
+      </view>
+
+      <view>
+        <text
+          class="width-transition"
+          bindtransitionstart="onTransitionStart"
+          bindtransitionend="onTransitionEnd"
+        >
+          text
+        </text>
+      </view>
+
+      <view>
+        <label
+          class="width-transition"
+          bindtransitionstart="onTransitionStart"
+          bindtransitionend="onTransitionEnd"
+        >
+          label
+        </label>
+      </view>
+
+  </view>
+</view>