colorui-doc/docs/10.文档/40.插件扩展/20.微动画.md

title, date, permalink, article

title	date	permalink	article
微动画	2023-05-28 16:17:38	/pages/plugin/animation	false

微动画

1. 加上类名 animation-fade|... 即可实现动画

2. 加上类名 animation-reverse 反向动画

3. 延迟动画加上 style animation-delay: 1s

.animation-fade         /* 淡入  */
.animation-scale-up     /* 放大  */
.animation-scale-down   /* 缩小  */
.animation-slide-top    /* 从上向下滑动  */
.animation-slide-bottom /* 从下向上滑动  */
.animation-slide-left   /* 从左向右滑动  */
.animation-slide-right  /* 从右向左滑动  */
.animation-shake        /* 摇动  */

gif动画

1. 看官方示例吧，不知道是不是路劲问题，还是咋，有几个显示不出来

<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>