Vue.js 类更改属性的转换

我目前有一个vue组件，用于选择要订购的饮料。 您可以增加或减少每种类型的饮料量

有两个按钮递增和递减，当该类型的订购饮料量等于0时，需要隐藏递减按钮。这可以通过使用：class=drink.amount>0？轻松实现visible'：'invisible'使用设置可见性的tailwind类：hidden css属性。使用此方法时，它看起来像：

现在，我尝试实现css动画，在饮料块下面滑动按钮来隐藏它，然后从dom中隐藏。我想使用vue转换组件来实现这一点，因为在整个应用程序中大量使用该组件

现在我遇到的问题是，vue转换组件仅适用于数量有限的vue函数，其中包括v-if和v-show。v-if从dom中删除html。v-show设置属性显示：所有这两个功能都不具有移动按钮的效果：

我想知道如何使用vue过渡组件并在没有动画的情况下获得所需的对齐按钮

---

作为当前的解决方法，我删除了转换组件，添加了转换幻灯片右键进入活动类，如果计数=0，我有条件地添加转换幻灯片右键进入类。这不会隐藏元素，但不需要隐藏它，因为我被移动到中心块下方。

您可以尝试以下代码

- {{drink.name}{{drink.amount} + .w-完整{边距：10px 0px；} .转换幻灯片右键进入活动状态，.转换幻灯片右键离开活动状态{ 转变：转变； } .transition slide right enter..transition slide right left to{ 转化：转化率100%； } 新Vue{ el:“待办事项列表示例”， 资料{ 返回{ 饮料：[ {名称：“可乐”，价格：“1.0”，金额：1}， {名称：'Sinas'，价格：'1.0'，金额：1} ], } }, 方法：{ 单击1：功能索引{ this.drinks[index].amount=this.drinks[index].amount-1； }, 单击2：函数索引{ this.drinks[index].amount=this.drinks[index].amount+1； } } }

---

您可以尝试以下代码

- {{drink.name}{{drink.amount} + .w-完整{边距：10px 0px；} .转换幻灯片右键进入活动状态，.转换幻灯片右键离开活动状态{ 转变：转变； } .transition slide right enter..transition slide right left to{ 转化：转化率100%； } 新Vue{ el:“待办事项列表示例”， 资料{ 返回{ 饮料：[ {名称：“可乐”，价格：“1.0”，金额：1}， {名称：'Sinas'，价格：'1.0'，金额：1} ], } }, 方法：{ 单击1：功能索引{ this.drinks[index].amount=this.drinks[index].amount-1； }, 单击2：函数索引{ this.drinks[index].amount=this.drinks[index].amount+1； } } }

<div v-for="drink in drinks" class="w-full flex">
    <div class="mx-auto flex">
        <transition name="transition-slide-right">
            <div class="bg-white w-16 h-16 flex justify-center items-center mt-12"
                 v-show="drink.amount">
                <p>-</p>
            </div>
        </transition>
        <div class="bg-brand w-32 h-24 flex justify-center items-center my-8 z-30">
            <p>{{drink.name}} ({{drink.amount}})</p>
        </div>
        <div class="bg-white w-16 h-16 flex justify-center items-center mt-12">
            <p>+</p>
        </div>
    </div>
</div>

<script>
    export default {
        name: "CreateTransaction",
        data: function() {
            return {
                drinks: [
                    {name: 'Cola', price: '1.0', amount: 1},
                    {name: 'Sinas', price: '1.0', amount: 0}
                ],
            }
        }        
    }
</script>

.transition-slide-right-enter-active, .transition-slide-right-leave-active {
    transition: transform .5s;
}

.transition-slide-right-enter, .transition-slide-right-leave-to {
    transform: translateX(100%);
}