2 Star 9 Fork 2

hcoder / Grace Animation Library

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or Download
css-animate.vue 3.83 KB
Copy Edit Web IDE Raw Blame History
hcoder authored 2021-04-09 10:50 . 20210409
<template>
<view>
<gal-animate-bg>
<view class="banner-title-main">
<view style="padding:150rpx 0;">
<gal-css-animate
:animateName="animateName"
duration="2s"
timingFunction="ease-in">
<text class="gal-h3 gal-block-text gal-text-center gal-color-white">www.GraceUI.com </text>
</gal-css-animate>
</view>
</view>
</gal-animate-bg>
<view class="gal-body gal-margin-top">
<view style="height:50rpx;"></view>
<view class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center">
<text class="gal-text-small gal-color-gray">效果 : </text>
<view class="gal-picker-wrap">
<picker
@change="pickerChange"
:value="animationIndex"
:range="animateArray">
<view class="gal-picker-text gal-icons">{{animateArray[animationIndex]}} &#xe603;</view>
</picker>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
animationIndex : 0,
animateArray : [
'bounce · 回弹', 'flash · 闪烁', 'pulse · 脉冲', 'rubberBand · 橡皮筋',
'shake · 晃动', 'headShake · 摇头', 'swing · 摇摆', 'tada · 缩放加摇摆',
'wobble · 大幅度摇摆','jello · 果冻', 'heartBeat · 心跳', 'bounceIn · 跳动进入',
'bounceInDown · 向下飞入', 'bounceInLeft · 左侧飞入', 'bounceInRight · 右侧飞入',
'bounceInUp · 向上飞入','bounceOutDown · 向下飞出','bounceOutLeft · 左侧飞出',
'bounceOutRight · 右侧飞出','bounceOutUp · 向上飞出',
'fadeIn · 渐变进入', 'fadeInDown · 渐变向下进入','fadeInDownBig · 渐变向下进入大幅度','fadeInLeft · 渐变左侧进入',
'fadeInLeftBig · 渐变左侧进入大幅度','fadeInRight · 渐变右侧进入','fadeInRightBig · 渐变右侧进入大幅度',
'fadeInUp · 渐变向上进入','fadeInUpBig · 渐变向上进入大幅度','fadeOut · 渐变消失','fadeOutDown · 向下淡出',
'fadeOutDownBig · 向下淡出大幅度','fadeOutLeft · 左侧淡出','fadeOutLeftBig · 左侧淡出大幅度','fadeOutRight · 右侧淡出',
'fadeOutRightBig · 右侧淡出大幅度','fadeOutUp · 向上淡出','fadeOutUpBig · 向上淡出大幅度',
'flip · 快速翻转','flipInX · 水平翻转','flipInY · 垂直翻转','flipOutX · 水平翻转后消失','flipOutY · 垂直翻转后消失',
'lightSpeedIn · 光速侠进入','lightSpeedOut · 光速侠消失',
'rotateIn · 旋转进入','rotateInDownLeft · 旋转左下为轴','rotateInDownRight · 旋转右下为轴','rotateInUpLeft · 旋转左上为轴',
'rotateInUpRight · 旋转右上为轴','rotateOut · 旋转淡出','rotateOutDownLeft · 旋转左下为轴淡出',
'rotateOutDownRight · 旋转右下为轴淡出','rotateOutUpLeft · 旋转左上为轴淡出','rotateOutUpRight · 旋转右上为轴淡出',
'hinge · 合页','jackInTheBox · 动态盒子','rollIn · 滚动进入','rollOut · 滚动淡出',
'zoomIn · 缩放进入','zoomInDown · 向下缩放进入','zoomInLeft · 从左缩放进入','zoomInRight · 从右缩放进入',
'zoomInUp · 向上缩放进入','zoomOut · 缩放消失','zoomOutDown · 向下缩放消失','zoomOutLeft · 从左缩放消失',
'zoomOutRight · 从右缩放消失','zoomOutUp · 向上缩放消失','slideInLeft · 左侧滑入',
'slideInRight · 右侧滑入','slideInUp · 顶部滑入','slideOutDown · 底部滑出','slideOutLeft · 左侧滑出',
'slideOutRight · 右侧滑出','slideOutUp · 顶部滑出'
],
animateName : 'bounce'
}
},
methods: {
pickerChange : function(e){
this.animationIndex = e.detail.value;
var animateName = this.animateArray[this.animationIndex];
animateName = animateName.split('·');
this.animateName = animateName[0];
}
}
}
</script>
<style scoped>
.demo-text{font-size:36rpx;}
</style>

Comment ( 1 )

Sign in to post a comment

1
https://gitee.com/hcoder2016/grace-animation-library.git
git@gitee.com:hcoder2016/grace-animation-library.git
hcoder2016
grace-animation-library
Grace Animation Library
master

Search