样式相关

1. 移动端1px显示不缩放问题
   解决方法：
   使用伪元素，然后给这个元素加一个scaleY(0.5)

.case {
  &::after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e6e6e6;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }
}

• 四条boder样式设置:

.scale{
  position: relative;
  margin-bottom: 20px;
  border:none;
}
.scale:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

2. 弹窗过度动画

// 针对黑色遮罩层的动画，透明度改变的
<transition name="bounce">
      <div class="box-wrapper" v-show="visibleConfirm" :class="{active: visibleConfirm}">
        // 针对弹窗内容的动画，里面必须再有一个v-show或v-if
        <transition name="bounce1">
          <div v-show="visibleConfirm">
            <div class="open-popups">
              <div class="top">
                闪付功能是颜值卡用户的专属特权，您还未开通颜值卡，是否现在去开通？
              </div>
              <div class="bottom">
                <div class="b-l" @click="visibleConfirm= false">我再想想</div>
                <div class="b-r" @click="jumpIndex">去开通</div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </transition>

data() {
  return {
    visibleConfirm: false
  }
}
methods: {
  onOpenPay () {
      this.visibleConfirm = true
   }
},
watch: {
    // 根据弹窗是否显示来让主体内容可否拖动
    visibleConfirm (val) {
      if (val) {
        document.querySelector('body').style.overflow = 'hidden'
      } else {
        document.querySelector('body').style.overflow = 'auto'
      }
    }
  }

.box-wrapper{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    .open-popups {
      width: 540px;
      height: 320px;
      background: #fff;
      border-radius: 24px;
      .top{
        font-size: 30px;
        color: #333333;
        line-height: 42px;
        text-align: center;
        padding: 60px 50px 49px;
        border-bottom: 1px solid #E5E5E5;
      }
      .bottom {
        display: flex;
        .b-l,.b-r{
          width: calc(50% - 0.5px);
          text-align: center;
          box-sizing: content-box;
          height: 87px;
          line-height: 87px;
          font-size: 32px;
          color: #999999;
        }
        .b-l{
          border-right: 1px solid #E5E5E5;
        }
        .b-r{
          color: #0076FF;
        }
      }
    }
.bounce-enter-active {
  animation: mymove .25s;
}
.bounce-leave-active {
  animation: mymove .25s reverse;
}
.bounce1-enter-active {
  animation: mymove1 .25s;
}
.bounce1-leave-active {
  animation: mymove1 .25s reverse;
}
  @keyframes mymove {
    0%{background: rgba(0,0,0,0)}
    100%{background: rgba(0,0,0,.5)}
  }
  @keyframes mymove1 {
    0%{opacity: 0;transform: scale(0.8)}
    100%{opacity: 1;transform: scale(1)}
  }

这里要注意的就是多个动画之间需要多个transition包裹，每个里面必须使用一个v-if或v-show

3. 使用flex实现的瀑布流布局
   https://jsbin.com/zowukefefe/edit?html,css,output