Переход на изменение класса свойства - PullRequest
Новая
       35

Переход на изменение класса свойства

0 голосов
/ 29 июня 2018

В настоящее время у меня есть компонент vue, который я использую для выбора напитков, которые необходимо заказать. Вы можете увеличивать или уменьшать количество напитков для каждого типа.

Есть 2 кнопки (Увеличение и уменьшение), кнопка уменьшения должна быть скрыта, когда количество заказанных напитков для этого типа равно 0. Это можно легко сделать, используя :class="drink.amount > 0 ? 'visible':'invisible'", используя классы попутного ветра, которые устанавливают visibility:hidden свойство css. При использовании этого метода это выглядит так:

Image showing vertically aligned buttons

Теперь я попытался реализовать анимацию CSS (сдвинув кнопку под блоком напитка, чтобы скрыть его, а затем спрятаться от dom). Я хочу реализовать это, используя компонент перехода vue, поскольку он интенсивно используется во всем приложении.

Теперь у меня проблема в том, что компонент перехода vue работает только с ограниченным количеством функций vue, среди которых v-if и v-show. v-if удаляет HTML из домена. v-show устанавливает свойство display:none, обе эти функции имеют эффект смещения кнопок: Image showing button missing decrement button left of center

Я хотел бы знать, как я могу использовать компонент перехода 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 и, если count == 0, я условно добавлю класс transition-slide-right-enter. Это не скрывает элемент, но скрывать его не требуется, поскольку я перемещен под центральный блок.

1 Ответ

0 голосов
/ 30 июня 2018

вы можете попробовать следующий код 

<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-full{margin: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>
...