小程序css弹窗动画

<view class="popupView" style="top:{{height+35}}px" bindtap="changePopupView">

    <!-- 遮罩区域，点击隐藏弹出层 -->

    <view class="close" bindtap="changePopupView"></view>

    <!-- 内容区 -->

    <view class="content"  bindtap="onClose">

      <view wx:for="{{ data }}" wx:key="index">

        <view class="text {{ index === data.length - 1 ? 'last-text' : '' }}" data-id="{{ item.id }}" bindtap="priceQuotes">{{ item.name }}</view>

      </view>

    </view>

</view>

.popupView .content{

    background-color: #FFF;

    border-radius: 0 0 15px 15px;

    max-height: 190px;

    padding: 5rpx 32rpx;

    overflow: auto;

    color: #333333;

    font-size: 28rpx;

    border-top:1rpx solid #efebeb;

    transform-origin: top; /* 设置动画的变换原点为顶部 */

    animation: slideIn 0.3s ease-in-out; /* 添加弹窗动画 */

}

@keyframes slideIn {

    from {

      transform: translateY(-100%); /* 从上向下滑入 */

    }

    to {

      transform: translateY(0);

    }

  }