• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序定时器自动隐藏/显示

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

wxml页面:

<view class="guide {{showView?\'show\':\'hide\'}}" animation="{{animationGuide}}">
    <view class="welcome" bindtap="welcome" animation="{{animationTxt}}">
      <text class="wel tocenter_left1" animation="{{animationData}}">W</text>
      <text class="wel tocenter_left2" animation="{{animationData2}}">E</text>
      <text class="wel tocenter_left3" animation="{{animationData3}}">L</text>
      <text class="wel tocenter_middle" animation="{{animationDataRotate}}">C</text>
      <text class="wel tocenter_right3" animation="{{animationData4}}">O</text>
      <text class="wel tocenter_right2" animation="{{animationData5}}">M</text>
      <text class="wel tocenter_right1" animation="{{animationData6}}">E</text>   
    </view>
    <view class="welcome_txt">网络</view>
</view> 

<view>
  <text style=\'height:100%;width:100%;backgroung-color:yellow\'></text>
</view>

  <import src="/we7/pages/templates/footer.wxml" />
  <template is="footerWx" data="{{...tabBar}}" />
js页面:
Page({
data: {
showView: true,
animationData: {}
},


onLoad: function (options) {
showView: (options.showView == "true" ? true : false)
},

onReady: function () {
var animation = wx.createAnimation({
duration: 500,
timingFunction: \'linear\',
})

this.animation = animation

//WELCOME动画效果
this.setData({
animationData: animation.export()
})

setTimeout(function () {
// W字母
animation.translate(80).step()
this.setData({
animationData: animation.export()
})
// E字母
animation.translate(65).step()
this.setData({
animationData2: animation.export()
})
// L字母
animation.translate(40).step()
this.setData({
animationData3: animation.export()
})
// O字母
animation.translate(-35).step()
this.setData({
animationData4: animation.export()
})
// M字母
animation.translate(-55).step()
this.setData({
animationData5: animation.export()
})
// E字母
animation.translate(-80).step()
this.setData({
animationData6: animation.export()
})

}.bind(this), 1000)

setTimeout(function () {
// C字母
animation.translate(0).rotateY(360).step()
this.setData({
animationDataRotate: animation.export()
})

}.bind(this), 2000)

setTimeout(function () {
// 背景色
animation.translate(0).rotateY(0).height(300).step()
this.setData({
animationGuide: animation.export()
})

}.bind(this), 3000)

//黄色背景隐藏
setTimeout(function () {
var that = this;
that.setData({
showView: (!that.data.showView)
})
}.bind(this), 4500)

}
})
 
wxss页面:
::-webkit-scrollbar{
display:none;
}
/* swiper navigator{
display: inline; */
/* height:200px; */
/* }
.swiper{
height:300px;
} */
.guide{
width: 100%;
height: 100%;
background: #fff100;
position: fixed;
left: 0;
top: 0;
text-align: center;
/* display: flex; */
}
.welcome{
top:40%;
position: relative;
}
.welcome_txt{
top: 52%;
position: relative;
}
.hide{
display: none;
}
.show{
display: block;
}
.wel{
padding: 3px;
font-size: 20px;
font-weight: 400;
position: absolute;
}
.around {
  transform: rotateY(360deg);
  transition: all ease 1s;
}
.tocenter_left1 {
left: 3%;
}
.tocenter_left2 {
left: 16%;
}
.tocenter_left3 {
left: 30%;
}
.tocenter_middle {
left: 47%;
}
.tocenter_right3 {
right: 30%;
}
.tocenter_right2 {
right: 16%;
}
.tocenter_right1 {
right: 3%;
}

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap