index.wxml 6.57 KB
<!--index.wxml-->

  <view class="clock">
  <view class="time-container days">
      <view class="digit">
        <text class="num top" id="day-tens-top">{{dayTensTop}}</text>
        <text class="num bottom" id="day-tens-bottom">
          <text class="bottom-container">{{dayTensBottom}}</text></text>
          <view class="swapper">
            <view id="top-day-tens-anim" class="num-anim top-anim {{dayTensTopAnimUp}}" >
              <view class="top-half-num">{{dayTenstopHalfNum}}</view>
            </view>
            <view id="bottom-day-tens-anim" class="num-anim bottom-anim {{dayTensBottomAnimDown}}">
              <view class="bottom-half-num">
                <view class="dropper">{{dayTensdropper}}</view></view>
            </view>
        </view>
      </view>
      <view class="digit">
        <text class="num top" id="day-ones-top">{{dayOnesTop}}</text>
        <text class="num bottom" id="day-ones-bottom">
          <text class="bottom-container">{{dayOnesBottom}}</text></text>
          <view class="swapper">
             <!-- hidden="{{dayOnesTopAnim}}" -->
            <view id="top-day-ones-anim" class="num-anim top-anim {{dayOnesTopAnimUp}}">
              <view class="top-half-num" >{{dayOnestopHalfNum}}</view>
            </view>
             <!-- hidden="{{hourOnesBottomAnim}}" -->
            <view id="bottom-day-ones-anim" class="num-anim bottom-anim {{dayOnesBottomAnimDown}}">
              <view class="bottom-half-num">
                <view class="dropper">{{dayOnesdropper}}</view></view>
            </view>
        </view>

      </view>
    </view>
    <view class="split-text">:</view>
    <view class="time-container hours">
      <view class="digit">
        <text class="num top" id="hour-tens-top">{{hourTensTop}}</text>
        <text class="num bottom" id="hour-tens-bottom">
          <text class="bottom-container">{{hourTensBottom}}</text></text>
          <view class="swapper">
            <view id="top-hour-tens-anim" class="num-anim top-anim {{hourTensTopAnimUp}}" >
              <view class="top-half-num">{{hourTenstopHalfNum}}</view>
            </view>
            <view id="bottom-hour-tens-anim" class="num-anim bottom-anim {{hourTensBottomAnimDown}}">
              <view class="bottom-half-num">
                <view class="dropper">{{hourTensdropper}}</view></view>
            </view>
        </view>
      </view>
      <view class="digit">
        <text class="num top" id="hour-ones-top">{{hourOnesTop}}</text>
        <text class="num bottom" id="hour-ones-bottom">
          <text class="bottom-container">{{hourOnesBottom}}</text></text>
          <view class="swapper">
             <!-- hidden="{{hourOnesTopAnim}}" -->
            <view id="top-hour-ones-anim" class="num-anim top-anim {{hourOnesTopAnimUp}}">
              <view class="top-half-num" >{{hourOnestopHalfNum}}</view>
            </view>
             <!-- hidden="{{hourOnesBottomAnim}}" -->
            <view id="bottom-hour-ones-anim" class="num-anim bottom-anim {{hourOnesBottomAnimDown}}">
              <view class="bottom-half-num">
                <view class="dropper">{{hourOnesdropper}}</view></view>
            </view>
        </view>

      </view>
    </view>
    <view class="split-text">:</view>
    <view class="time-container minutes">
      <view class="digit">
        <text class="num top" id="minute-tens-top">{{minuteTensTop}}</text>
        <text class="num bottom" id="minute-tens-bottom">
          <text class="bottom-container">{{minuteTensBottom}}</text></text>
          <view class="swapper">
            <view id="top-minute-tens-anim" class="num-anim top-anim {{minuteTensTopAnimUp}}" >
              <view class="top-half-num">{{minuteTenstopHalfNum}}</view>
            </view>
            <view id="bottom-minute-tens-anim" class="num-anim bottom-anim {{minuteTensBottomAnimDown}}">
              <view class="bottom-half-num">
                <view class="dropper">{{minuteTensdropper}}</view></view>
            </view>
        </view>
      </view>
      <view class="digit">
        <text class="num top" id="minute-ones-top">{{minuteOnesTop}}</text>
        <text class="num bottom" id="minute-ones-bottom">
          <text class="bottom-container">{{minuteOnesBottom}}</text></text>
          <view class="swapper">
             <!-- hidden="{{minuteOnesTopAnim}}" -->
            <view id="top-minute-ones-anim" class="num-anim top-anim {{minuteOnesTopAnimUp}}">
              <view class="top-half-num" >{{minuteOnestopHalfNum}}</view>
            </view>
             <!-- hidden="{{minuteOnesBottomAnim}}" -->
            <view id="bottom-minute-ones-anim" class="num-anim bottom-anim {{minuteOnesBottomAnimDown}}">
              <view class="bottom-half-num">
                <view class="dropper">{{minuteOnesdropper}}</view></view>
            </view>
        </view>

      </view>
    </view>
    <view class="split-text">:</view>
    <view class="time-container seconds">
      <view class="digit">
        <text class="num top" id="second-tens-top">{{secondTensTop}}</text>
        <text class="num bottom" id="second-tens-bottom">
          <text class="bottom-container">{{secondTensBottom}}</text></text>
          <view class="swapper">
            <view id="top-second-tens-anim" class="num-anim top-anim {{secondTensTopAnimUp}}" >
              <view class="top-half-num">{{secondTenstopHalfNum}}</view>
            </view>
            <view id="bottom-second-tens-anim" class="num-anim bottom-anim {{secondTensBottomAnimDown}}">
              <view class="bottom-half-num">
                <view class="dropper">{{secondTensdropper}}</view></view>
            </view>
        </view>
      </view>
      <view class="digit">
        <text class="num top" id="second-ones-top">{{secondOnesTop}}</text>
        <text class="num bottom" id="second-ones-bottom">
          <text class="bottom-container">{{secondOnesBottom}}</text></text>
          <view class="swapper">
             <!-- hidden="{{secondOnesTopAnim}}" -->
            <view id="top-second-ones-anim" class="num-anim top-anim {{secondOnesTopAnimUp}}" >
              <view class="top-half-num" >{{secondOnestopHalfNum}}</view>
            </view>
             <!-- hidden="{{secondOnesBottomAnim}}" -->
            <view id="bottom-second-ones-anim" class="num-anim bottom-anim {{secondOnesBottomAnimDown}}">
              <view class="bottom-half-num">
                <view class="dropper">{{secondOnesdropper}}</view></view>
            </view>
        </view>

      </view>
    </view>

  <view class="line"></view>
  </view>


<!-- <text style="position:absolute;top:100px;left:0"  hidden='{{!topSecondOnesAnim}}'>{{secondOnesTop}}</text> -->