我目前有一个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
类,如果count == 0,则有条件地添加了transition-slide-right-enter
类。这不会隐藏该元素,但是由于我已移到中心块下方,因此不需要隐藏它。
答案 0 :(得分:-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-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>