molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-03-09 16:44:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.0.6

Browse Source 
1.修复行距带来的垂直不居中问题
2.优化操作条组件，新增多种样式
3.优化背景颜色（某些组件的默认背景调整,移除一些important）
4.更新动画扩展5.优化按钮,标签,头像的大小
This commit is contained in:
Weilanwl
2019-02-09 16:57:35 +08:00
parent dbe5f7c892
commit 122f46b8d4
70 changed files with 2812 additions and 1791 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
demo/pages/plugin/animation/animation.js
View File

@@ -3,6 +3,62 @@ Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
list: [{
name: 'fade',
color: 'red'
},
{
name: 'scale-up',
color: 'orange'
},
{
name: 'scale-down',
color: 'olive'
},
{
name: 'slide-top',
color: 'green'
}, {
name: 'slide-bottom',
color: 'cyan'
},
{
name: 'slide-left',
color: 'blue'
},
{
name: 'slide-right',
color: 'purple'
},
{
name: 'shake',
color: 'mauve'
}
],
toggleDelay: false
},
});
toggle(e) {
console.log(e);
var anmiaton = e.currentTarget.dataset.class;
var that = this;
that.setData({
animation: anmiaton
})
setTimeout(function() {
that.setData({
animation: ''
})
}, 1000)
},
toggleDelay() {
var that = this;
that.setData({
toggleDelay: true
})
setTimeout(function() {
that.setData({
toggleDelay: false
})
}, 1000)
}
})

44
demo/pages/plugin/animation/animation.wxml
View File

@@ -5,7 +5,47 @@
</navigator>
</view>
</view>
<view class="margin radius gradual-green shadow-blur">
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 默认效果
</view>
</view>
<view class="padding-sm">
<view class='flex flex-wrap justify-around'>
<button class='cu-btn bg-{{item.color}} animation-{{animation==item.name? item.name :""}} margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name}}' wx:for="{{list}}">{{item.name}}</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 反向动画
</view>
</view>
<view class="padding-sm">
<view class='flex flex-wrap justify-around'>
<button class='cu-btn bg-{{item.color}} animation-{{animation==item.name+"s"? item.name :""}} animation-reverse margin-sm basis-sm shadow' bindtap='toggle' data-class='{{item.name+"s"}}' wx:for="{{list}}">{{item.name}}</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 延迟执行
</view>
<view class='action'>
<button class='cu-btn bg-cyan shadow' bindtap='toggleDelay'>开始执行</button>
</view>
</view>
<view class="padding-sm">
<view class='flex flex-wrap justify-around'>
<button class=' bg-{{item.color}} cu-btn {{toggleDelay?"animation-slide-bottom":""}} margin-sm basis-sm shadow' style='animation-delay: {{(index+1)*0.1}}s;' wx:for="{{list}}">0.{{index+1}}s</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> Gif动画
</view>
</view>
<view class="margin radius bg-gradual-green shadow-blur">
<image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-black response' style='height:100rpx'></image>
</view>
<view class="margin flex">
@@ -17,7 +57,7 @@
</view>
</view>
<view class="margin flex">
<view class='gradual-blue flex-sub margin-right radius shadow-lg'>
<view class='bg-gradual-blue flex-sub margin-right radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/rhomb-black.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
</view>
<view class='bg-white flex-sub radius shadow-lg'>

171
demo/pages/plugin/animation/animation.wxss
View File

@@ -9,3 +9,174 @@ image[class*="gif-"]{
.gif-white{
mix-blend-mode: multiply;
}
[class*=animation-] {
animation-duration: .5s;
animation-timing-function: ease-out;
animation-fill-mode: both
}
.animation-fade {
animation-name: fade;
animation-duration: .8s;
animation-timing-function: linear
}
.animation-scale-up {
animation-name: scale-up
}
.animation-scale-down {
animation-name: scale-down
}
.animation-slide-top {
animation-name: slide-top
}
.animation-slide-bottom {
animation-name: slide-bottom
}
.animation-slide-left {
animation-name: slide-left
}
.animation-slide-right {
animation-name: slide-right
}
.animation-shake {
animation-name: shake
}
.animation-reverse {
animation-direction: reverse
}
@keyframes fade {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes scale-up {
0% {
opacity: 0;
transform: scale(.2)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes scale-down {
0% {
opacity: 0;
transform: scale(1.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes slide-top {
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes slide-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0)
}
10% {
transform: translateX(-9px)
}
20% {
transform: translateX(8px)
}
30% {
transform: translateX(-7px)
}
40% {
transform: translateX(6px)
}
50% {
transform: translateX(-5px)
}
60% {
transform: translateX(4px)
}
70% {
transform: translateX(-3px)
}
80% {
transform: translateX(2px)
}
90% {
transform: translateX(-1px)
}
}
@keyframes slide-left {
0% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes slide-right {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}