molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-06-08 06:53:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.1.2

Browse Source
This commit is contained in:
Weilanwl
2019-03-28 23:08:35 +08:00
parent 89817a88e8
commit bb889509c0
108 changed files with 3446 additions and 4082 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/pages/plugin/animation/animation.wxml
+40 -44
View File
@@ -1,74 +1,70 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg);">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 微动画
</navigator>
</view>
</view>
<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">微动画</view>
</cu-custom>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 默认效果
<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 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}}" wx:key="{{index}}">{{item.name}}</button>
</view>
</view>
<view class="cu-bar bg-white">
<view class='action'>
<text class='icon-title text-orange'></text> 反向动画
<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}}" wx:key="{{index}}">{{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='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 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}}" wx:key="{{index}}">0.{{index+1}}s</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 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>
<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx"></image>
</view>
<view class="margin flex">
<view class='bg-black flex-sub margin-right radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-black.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
<view class="bg-black flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
</view>
<view class='bg-white flex-sub radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-white.gif' mode='aspectFit' class='gif-white response' style='height:240rpx'></image>
<view class="bg-white flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
</view>
</view>
<view class="margin flex">
<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 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'>
<image src='https://image.weilanwl.com/gif/rhomb-white.gif' mode='aspectFit' class='gif-white response' style='height:240rpx'></image>
<view class="bg-white flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/rhomb-white.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
</view>
</view>
<view class="margin flex">
<view class='bg-white flex-sub margin-right radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-1.gif' mode='aspectFit' class='gif-white response' style='height:240rpx'></image>
<view class="bg-white flex-sub margin-right radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-1.gif" mode="aspectFit" class="gif-white response" style="height:240rpx"></image>
</view>
<view class='bg-black flex-sub radius shadow-lg'>
<image src='https://image.weilanwl.com/gif/loading-2.gif' mode='aspectFit' class='gif-black response' style='height:240rpx'></image>
<view class="bg-black flex-sub radius shadow-lg">
<image src="https://image.weilanwl.com/gif/loading-2.gif" mode="aspectFit" class="gif-black response" style="height:240rpx"></image>
</view>
</view>
demo/pages/plugin/animation/animation.wxss
+3 -179
View File
@@ -1,182 +1,6 @@
image[class*="gif-"]{
@import "../../../colorui/animation.wxss";
image[class*="gif-"] {
border-radius: 6rpx;
display: block;
}
.gif-black{
mix-blend-mode: screen;
}
.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)
}
}