踩坑日记01---斜角填充的进度条

最近接到毕竟奇怪的一个需求–"斜角填充的进度条"效果大概是这样的：

说实话刚看到这个需求有点懵逼的，上手做了一下用正常的方法做个左右那种线性的动画挺容易的但斜角确实是没办法，但没办法上面需求提出来了只能硬肝。

思路1：向正常的推进的想法去做：使用做出一个大的父元素旋转45度角并包裹着并定位好图片然后设置溢出隐藏，当需要包裹图片出现的时候吧父元素的长度给加大使得被包裹的图片出现【使得溢出隐藏失效】
溢出隐藏前

溢出隐藏中

溢出隐藏后

此时我们把红色那块父元素给取消背景色即可

代码如下：

HTML

<view id="app">
  <!-- <view class="delay-pay">
    <view class="delay-pay-img">
      <image src="/res/wxpay.png"></image>
    </view>
    <view class="order-status"><text>订单尚未支付</text></view>
    <text class="tips">请点击底部按钮继续支付\n未支付的订单将在30分钟后自动取消</text>
    <view class="order-number">
      <view>订单编号</view>
      <view>C00681711023</view>
    </view>
    <view class="buttom" id="0" bindtap="pay">
        <image src="/res/wxpay2.png" style="width: 29rpx;height: 28rpx;margin-right: 20rpx;"></image>
        <view>去支付</view>
      </view>
  </view> -->
  <view class="delay-pay">
    <view class="delay-pay-img success_pay">
      <view class="logo">
        <view class="transfer0" >
            <view class="dingwei {{active0?'active0':''}}">
              <view class="transfer1">
                <image src="/res/transfer0.png"></image>
              </view>
            </view>
            <image src="/res/transfer1.png"></image>
        </view>
      </view>      
      <!-- <view class="logo">
        <view class="transfer0 {{active?'active':''}}" >
            <image src="/res/transfer0.png"></image>
        </view>
      </view> -->
    </view>
    <view class="order-status success"><text>下单成功\n 正在前往支付</text></view>
    <text class="tips">正在加载微信支付，请销后...</text>
    <view class="order-number">
      <view>订单编号</view>
      <view>C00681711023</view>
    </view>
    <view class="buttom" id="0" bindtap="pay">
      <image src="/res/wxpay2.png" style="width: 29rpx;height: 28rpx;margin-right: 20rpx;"></image>
      <view>去支付</view>
    </view>
  </view>
</view>

CSS

/* @font-face {
  font-family:"HelveticaNeue";
  src: url('https://res.dongchongkeji.com/fonts/HelveticaNeue.woff');
} */

page {
  background: #FFFFFF;
}

image {
  width: 100%;
  height: 100%;
}

#app {
  /* background: red; */
  width: 100vw;
  height: 100vh;

}

.ceshi {
  font-family: "HelveticaNeue";
}

/* 待支付模板 */
.delay-pay {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.delay-pay .delay-pay-img {
  width: 82rpx;
  height: 75rpx;
  margin: 445rpx 0 69rpx 0;
}

.delay-pay .order-status {
  font-size: 43rpx;
  font-family: "HelveticaNeue";
  font-weight: normal;
  color: #111111;
  width: 100vw;
  text-align: center;
}

.success {
  font-size: 44rpx;
  font-weight: 500;
  line-height: 50rpx;
}

.tips {
  height: 200rpx;
  width: 100vw;
  font-size: 23rpx;
  font-family: "HelveticaNeue";
  font-weight: normal;
  color: #111111;
  margin: 18rpx 0 195rpx 0;
  text-align: center;
  line-height: 2;
  letter-spacing: 3rpx;
}

.order-number {
  font-size: 24rpx;
  font-family: "HelveticaNeue";
  font-weight: normal;
  color: #999999;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 192rpx;
}

.order-number:first-child {
  margin-bottom: 15rpx;
}

.buttom {
  width: 671rpx;
  height: 98rpx;
  background: rgb(17, 17, 17);
  border-radius: 46rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25rpx;
  font-family: "HelveticaNeue";
  font-weight: 700;
  color: rgb(255, 255, 255);
  margin-bottom: 60rpx;

  font-size: 24rpx;
  font-family: "HelveticaNeue";
  font-weight: bold;
  color: #FFFFFF
}

/*  */
.delay-pay .success_pay {
  width: 249rpx;
  height: 42rpx;
}

.logo {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;

}


.logo .transfer0{
  width: 249rpx;
  height: 42rpx;
  position: absolute;
  top: 0;
  left: 0;
  /* overflow: hidden; */
}
.dingwei{
  overflow: hidden;
  width: 360rpx;
  height: 360rpx;
  /* 结束：height: 590rpx;
    top: -15px;
    left: -37px;
     */
  /* background: red; */
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(100rpx,-400rpx) rotate(45deg);
}
.logo .dingwei .transfer1{
  width: 249rpx;
  height: 42rpx; 
  position: absolute;
  top: 445rpx;
  left: 110rpx;
  transform: rotate(-45deg);
}
.active0{
  animation: xiejiao 2s;
  animation-timing-function: ease;
}
@keyframes xiejiao { 
  from {
    height: 360rpx;
    top: 0;
    left: 0;
  }

  to {
    height: 590rpx;
    top: -15px;
    left: -37px;
  }
}
.transfer0 image{
  width: 249rpx;
  height: 42rpx; 
}
.active{
  animation: zhijiao 2s;
  animation-timing-function: ease;
}
@keyframes zhijiao { 
  from {
    width: 0;
  }

  to {
    width: 249rpx;
  }
}

JS没啥东西

// pages/pay/pay.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    active:true,
    active0:true,
    active1:false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})