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
text-fade.vue 1.90 KB
Copy Edit Web IDE Raw Blame History
hcoder authored 2021-04-12 11:31 . 20210412
<template>
<view class="gal-body">
<view style="margin-top:50rpx;">
<text class="gal-block-text gal-h4 gal-color-gray">文本淡入</text>
</view>
<view class="gal-margin-top">
<gal-animate-bg>
<view style="padding:80rpx 0;">
<view>
<gal-text-fade
ref="animationTextFadeIn"
text="GraceUI 动画库"
styleSet="font-size:50rpx; color:#FFFFFF;"></gal-text-fade>
</view>
</view>
</gal-animate-bg>
</view>
<view
class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center gal-margin-top-large"
hover-class="gal-tap">
<text class="gal-color-gray gal-text gal-icons"
@tap="play">点击这里重新播放动画</text>
</view>
<view style="margin-top:50rpx;">
<text class="gal-block-text gal-h4 gal-color-gray">文本淡出</text>
</view>
<view class="gal-margin-top">
<gal-animate-bg>
<view style="padding:80rpx 0;">
<view>
<gal-text-fade
type="out"
ref="animationTextFadeOut"
:text="text2"
styleSet="font-size:50rpx; color:#FFFFFF;"></gal-text-fade>
</view>
</view>
</gal-animate-bg>
</view>
<view
class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center gal-margin-top-large"
hover-class="gal-tap">
<text class="gal-color-gray gal-text gal-icons"
@tap="play2">点击这里重新播放动画</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
text2 : 'GraceUI 动画库'
}
},
methods: {
play : function () {
this.$refs.animationTextFadeIn.play();
},
play2 : function () {
// 利用 text2 值变化激活组件 watch 事件,实现动画播放
// 也可以使用 组件的 play 函数进行动画播放
if(this.text2 == "GraceUI 动画库"){
this.text2 = "GraceUI 动画库..."
}else{
this.text2 = "GraceUI 动画库"
}
}
}
}
</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