molong/colorui-doc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mjz update

Browse Source
This commit is contained in:
mjz
2023-06-18 13:41:09 +08:00
parent 0533aa0ebf
commit 1fdc7f8831
87 changed files with 2130 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/10.文档/40.插件扩展/20.微动画.md
+50 -5
View File
@@ -5,10 +5,55 @@ permalink: /pages/plugin/animation
article: false
---
## 操作条
## 微动画
::: details 点此查看页面源代码
页面位置：`/pages/plugin/animation`
```vue
1. 加上类名 `animation-fade|...` 即可实现动画
2. 加上类名 `animation-reverse` 反向动画
3. 延迟动画加上 style `animation-delay: 1s`
```css
.animation-fade /* 淡入 */
.animation-scale-up /* 放大 */
.animation-scale-down /* 缩小 */
.animation-slide-top /* 从上向下滑动 */
.animation-slide-bottom /* 从下向上滑动 */
.animation-slide-left /* 从左向右滑动 */
.animation-slide-right /* 从右向左滑动 */
.animation-shake /* 摇动 */
```
:::
## gif动画
1. 看官方示例吧，不知道是不是路劲问题，还是咋，有几个显示不出来
```html
<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:100upx"></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:240upx"></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:240upx"></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:240upx"></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:240upx"></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:240upx"></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:240upx"></image>
</view>
</view>
```