利用transition标签实现v-if、v-show显示与隐藏的一个动画过渡效果

 第一步：将要通过v-if显示隐藏的标签外部套上一层transition标签，并给标签name属性进行命名。

<transition name="fadeBox">
            <div v-if="allGoodsPrice>0" id="shoppingCart">
                <text>我将进行动画过渡</text>
            </div>
 </transition>

第二步：在样式表里面扩展使用fadeBox

    //组件显示的样式
    //元素进入页面时的起始状态
    #shoppingCart.fadeBox-enter{
        height: 0;
        opacity: 0;
        margin-top:-20rpx;
    }
    //元素进入动画播放过程中的样式
    #shoppingCart.fadeBox-enter-active{
        transition: all 0.5s linear;
        overflow: hidden;
    }
    //元素进入页面后的结束状态
    #shoppingCart.fadeBox-enter-to{
        height: 150rpx;
        margin-top: 0rpx;
        opacity: 1;
        
    }
    
    
    
    //组件隐藏的样式

   //元素开始离开时的起始状态(和进入结束时状态应一样)
    #shoppingCart.fadeBox-leave{
    
        height: 150rpx;
        opacity: 1;
        
    }

    //离开过程中的状态
    #shoppingCart.fadeBox-leave-active{
        transition: all 0.5s linear;
        overflow: hidden;
        
    }

   //元素离开页面后的结束状态
    #shoppingCart.fadeBox-leave-to{
        height: -150rpx;
        opacity: 0;
    }

   #shoppingCart{
        width: 100%;
        height: 150rpx;
        margin-top: -20rpx;
        padding: 0 60rpx;
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        }