zoukankan      html  css  js  c++  java
  • 小程序定时器自动隐藏/显示

    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%;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%;
    }
  • 相关阅读:
    windows8.1下安装Cygwin并通过apt-cyg安装软件包
    cocos2d-x 3.9 android studio项目命令行打包
    Android API Level与sdk版本对照表
    如何设置minSdkVersion和targetSdkVersion
    记录quick cocos2d-x3.2升级至cocos2d-x3.8
    [转]英语飙升的好方法
    cocos2d-x3.0rc打包apk遇到的一些问题记录
    vim显示行号、语法高亮、自动缩进的设置
    cocos2d-x在android真机上设置帧率无效的问题
    【Coding】Eclipse使用技巧
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/7766417.html
Copyright © 2011-2022 走看看