mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-13 11:34:02 +08:00
@@ -1,61 +0,0 @@
|
||||
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)
|
||||
}
|
||||
})
|
||||
@@ -1 +0,0 @@
|
||||
{}
|
||||
@@ -1,38 +0,0 @@
|
||||
<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>
|
||||
@@ -1,3 +0,0 @@
|
||||
page{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
Reference in New Issue
Block a user