eiru_pos/src/components/cart/CartItems.vue

<template lang="pug">
    .cart-items-wrapper
        transition-group(name="list" tag="ul" class="cart-items")
            cart-item(v-for="item in cartItems" :key="item" :item="item")
</template>

<script>
    import CartItem from '@/components/cart/CartItem'
    import { mapGetters, mapActions } from 'vuex'

    export default {
        components: {
            CartItem
        },
        computed: mapGetters([
            'cartItems'
        ]),
        methods: mapActions([
            'addToCart',
            'removeFromCart'
        ])
    }
</script>

<style lang="sass">
    .cart-items-wrapper
        width: 100%
        height: calc(100% - 100px)
        overflow-y: auto
        overflow-x: hidden

    .cart-items
        width: 100%
        padding: 0
        margin: 0

    .list-enter-active, .list-leave-active
        transition: all 0.3s

    .list-enter, .list-leave-to
        opacity: 0
        transform: translateX(300px)
</style>