类更改属性的转换

Posted 2023-03-07

【中文标题】类更改属性的转换

【英文标题】：Transition on class change property

【发布时间】：2018-12-08 21:46:45

【问题描述】：

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

有 2 个按钮（增量和减量），当该类型的点餐数量等于 0 时，需要隐藏减量按钮。这可以通过使用 :class="drink.amount > 0 ? 'visible':'invisible'" 使用设置的顺风类轻松完成visibility:hidden css 属性。使用此方法时，它看起来像：

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

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

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

<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>

最后是css：

.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%);

作为当前的解决方法，我删除了转换组件，添加了 transition-slide-right-enter-active 类，如果计数 == 0，我有条件地添加 transition-slide-right-enter 类。这不会隐藏元素，但不需要隐藏它，因为我被移动到了中心块下方。

【参考方案1】：

你可以试试下面的代码

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div class="row" id="todo-list-example">
    <div v-for="(drink,index) in drinks" class="w-full flex">
         <transition name="transition-slide-right"><button v-show="drink.amount" type="button" class="btn btn-danger" v-on:click="click1(index)">-</button></transition>
       
            <a class="btn btn-success" >drink.name (drink.amount)</a>
        
         <button type="button" class="btn btn-danger" v-on:click="click2(index)">+</button>
    </div>
</div>
<style>
.w-fullmargin:10px 0px;
   .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%);


</style>
<script>
    new Vue(
  el: '#todo-list-example',
 data()
            return 
                drinks: [
                    name: 'Cola', price: '1.0', amount: 1,
                    name: 'Sinas', price: '1.0', amount: 1
                ],
            
        ,
        methods:
            click1:function(index)
                this.drinks[index].amount=this.drinks[index].amount-1;
            ,
            click2:function(index)
                this.drinks[index].amount=this.drinks[index].amount+1;
            
            
)
</script>