小程序下方滑出弹窗css解决方案

发表于 2018-12-21 | 分类于小程序 | | 阅读次数:

字数统计: 192 | 阅读时长 ≈ 1

用css解决小程序点击按钮下方滑出弹窗

用@keyframes完成动画效果

.up{
  animation: up .7s;
}
.down{
  animation: down 1s;
}
@keyframes up
{
  0% { transform: translateY(550rpx); }
  100% { transform: translateY(0); }
}
@keyframes down
{
  0% { transform: translateY(0); }
  100% { transform: translateY(550rpx); }
}

绑定class

<!-- 立即预约 -->
<view wx:if="{{disTag}}" class='order'>
  <view class="order-box {{disTag== true ? 'up' : 'down'}}">   //绑定class完成加载效果
      <icon class='clear' type="clear" size="20" bindtap='clear'/>
      <view class='pro shop-prize'>
        门市价格：<text style=''>￥199</text>
      </view>
      <view class='pro order-prize'>
        支付金额：<text>￥{{yyPrice}}</text>
      </view>
      <button class='yd-submit' bindtap='payNow'>立即支付</button>
  </view>
</view>