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-animate2.vue 2.22 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="animateDuration"
timingFunction="ease-in"
@onMounted="onMounted"
:autoPlay="false"
fillMode="forwards"
ref="galcssanimate">
<text class="gal-h3 gal-block-text gal-text-center gal-color-white">{{animateContent}}</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"
hover-class="gal-tap">
<text class="gal-color-gray gal-text gal-icons"
@tap="replay">&#xe635; 重新播放动画</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
animateName : 'bounce',
animateContent : 'www.GraceUI.com',
animateDuration : '1s',
// 进行连贯播放的动画数组
animations : [
{name:'bounceInRight', duration:'2s', timer:3000, content:'www.GraceUI.com'},
{name:'fadeIn', duration:'2s', timer:3000, content:'基于 uni-app 的优秀前端框架'},
{name:'flipInY', duration:'2s', timer:3000, content:'Grace Animation Library'},
{name:'wobble', duration:'2s', timer:3000, content:'基于 uni-app 的动画框架'}
],
// 动画是否正在播放
playing : false
}
},
methods: {
onMounted : function () {
console.log('动画组件已经准备好...');
this.play(0);
},
play : function (index) {
if(index >= this.animations.length){
this.playing = false;
return ;
}
this.playing = true;
this.animateContent = '';
this.animateName = this.animations[index].name;
this.animateContent = this.animations[index].content;
this.animateDuration = this.animations[index].duration;
this.$refs.galcssanimate.play();
setTimeout(()=>{
this.play(index+1);
}, this.animations[index].timer)
},
replay : function () {
if(this.playing){
uni.showToast({
title:'动画正在播放',
icon:"none"
});
return ;
}
this.play(0);
}
}
}
</script>
<style>
</style>

Comment ( 0 )

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

182229 41614e54 1850385 182230 7885ed45 1850385