新增动画模块

突然更新~优化了交互。新增动画模块

app.json

@@ -23,7 +23,8 @@
     "pages/rating/rating",
     "pages/modal/modal",
     "pages/progress/progress",
-    "pages/chat/chat"
+    "pages/chat/chat",
+    "pages/animation/animation"
   ],
   "window": {
     "backgroundTextStyle": "black",

pages/animation/animation.js

@@ -0,0 +1,61 @@
+Page({
+  data: {
+    list: [{
+      name: 'fade',
+      color: 'primary'
+    },
+    {
+      name: 'scale-up',
+      color: 'success'
+    },
+    {
+      name: 'scale-down',
+      color: 'warning'
+    },
+    {
+      name: 'slide-top',
+      color: 'danger'
+    }, {
+      name: 'slide-bottom',
+      color: 'primary'
+    },
+    {
+      name: 'slide-left',
+      color: 'success'
+    },
+    {
+      name: 'slide-right',
+      color: 'warning'
+    },
+    {
+      name: 'shake',
+      color: 'danger'
+    }
+    ],
+    toggleDelay: false
+  },
+  toggle: function (e) {
+    console.log(e);
+    var anmiaton = e.currentTarget.dataset.class;
+    var that = this;
+    that.setData({
+      animation: anmiaton
+    })
+    setTimeout(function () {
+      that.setData({
+        animation: ''
+      })
+    }, 1000)
+  },
+  toggleDelay: function () {
+    var that = this;
+    that.setData({
+      toggleDelay: true
+    })
+    setTimeout(function () {
+      that.setData({
+        toggleDelay: false
+      })
+    }, 1000)
+  }
+})

pages/animation/animation.json

@@ -0,0 +1 @@
+{}

pages/animation/animation.wxml

@@ -0,0 +1,38 @@
+<view class="bar solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>默认效果</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='flex flex-wrap justify-around'>
+    <button class='{{item.color}} btn animation-{{animation==item.name? item.name :""}} m-sm basis-sm' bindtap='toggle' data-class='{{item.name}}' wx:for="{{list}}">{{item.name}}</button>
+  </view>
+</view>
+
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>反向动画</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='flex flex-wrap justify-around'>
+    <button class='{{item.color}} btn animation-{{animation==item.name+"s"? item.name :""}} animation-reverse m-sm basis-sm' bindtap='toggle' data-class='{{item.name+"s"}}' wx:for="{{list}}">{{item.name}}</button>
+  </view>
+</view>
+
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>延迟执行</text>
+  </view>
+</view>
+<view class="doc-main">
+  <view class='flex justify-around m-sm'>
+    <button class='btn secondary' bindtap='toggleDelay'>开始执行</button>
+  </view>
+  <view class='flex flex-wrap justify-around'>
+    <button class='{{item.color}} btn {{toggleDelay?"animation-slide-bottom":""}} m-sm basis-sm' style='animation-delay: {{(index+1)*0.1}}s;' wx:for="{{list}}">0.{{index+1}}s</button>
+  </view>
+</view>

pages/animation/animation.wxss

@@ -0,0 +1,3 @@
+page{
+  background: #f5f5f5;
+}

pages/index/index.js

@@ -14,6 +14,7 @@ Page({
       { title: '图标 ', name: 'icon' },
       { title: '加载', name: 'loading' },
       { title: '图片 ', name: 'image' },
+      { title: '动画 ', name: 'animation' },
     ],
     modules: [
       { title: '操作条', name: 'bar' },

project.config.json

@@ -29,7 +29,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": -1,
+			"current": 21,
 			"list": [
 				{
 					"id": 0,
@@ -156,6 +156,11 @@
 					"name": "聊天",
 					"pathName": "pages/chat/chat",
 					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "动画",
+					"pathName": "pages/animation/animation"
 				}
 			]
 		}