При клике на блок - он двигается

const app = new Vue({
   el: '#app',
   data() {
     return {
      show: true,
      active: false,
       items: [
         {id: 1, text: 1111},
         {id: 2, text: 2222},
         {id: 3, text: 3333},
         {id: 4, text: 4444},
         {id: 5, text: 5555},
         {id: 6, text: 6666},
         {id: 7, text: 7777},
       ],
     }
   },
  methods: {
    checkBlock(key) {
      if (key === 1) {
        this.active = !this.active;
      } else if (key === 4){
        this.show = !this.show;
      }
    }
  }
});

.buttons {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
}



.buttonsall {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin-right: 20px;
   padding: 4px 6px 4px 4px;
   gap: 5px;
   background: rgba(0, 0, 0, 0.4);
   border-radius: 8px;
   margin-right: 32px;
   height: 30px;
   &.active {
      animation: gradient 30s linear infinite;
      background: linear-gradient(90deg,
      rgba(0, 56, 255, 0.65) 0%,
      rgba(0, 56, 255, 0.65) 0.5%,
      rgba(255, 184, 0, 0.65) 5%,
      rgba(0, 56, 255, 0.65) 10%,
      rgba(0, 56, 255, 0.65) 10.5%,
      rgba(255, 184, 0, 0.65) 15%,
      rgba(0, 56, 255, 0.65) 20%,
      rgba(0, 56, 255, 0.65) 20.5%,
      rgba(255, 184, 0, 0.65) 25%,
      rgba(0, 56, 255, 0.65) 30%,
      rgba(0, 56, 255, 0.65) 30.5%,
      rgba(255, 184, 0, 0.65) 35%,
      rgba(0, 56, 255, 0.65) 40%,
      rgba(0, 56, 255, 0.65) 40.5%,
      rgba(255, 184, 0, 0.65) 45%,
      rgba(0, 56, 255, 0.65) 50%,
      rgba(0, 56, 255, 0.65) 50.5%,
      rgba(255, 184, 0, 0.65) 55%,
      rgba(0, 56, 255, 0.65) 60%,
      rgba(0, 56, 255, 0.65) 60.5%,
      rgba(255, 184, 0, 0.65) 65%,
      rgba(0, 56, 255, 0.65) 70%,
      rgba(0, 56, 255, 0.65) 70.5%,
      rgba(255, 184, 0, 0.65) 75%,
      rgba(0, 56, 255, 0.65) 80%,
      rgba(0, 56, 255, 0.65) 80.5%,
      rgba(255, 184, 0, 0.65) 85%,
      rgba(0, 56, 255, 0.65) 90%,
      rgba(0, 56, 255, 0.65) 90.5%,
      rgba(255, 184, 0, 0.65) 95%,
      rgba(0, 56, 255, 0.65) 100%);
      background-size: 2000% 2000%;
   }
}

.fade-enter-active {
   transition: all 0.3s ease-out;
}
 
.fade-leave-active {
   transition: all 0.8s cubic-bezier(0.3, -0.05, 0.7, -0.5);
}
 
.fade-leave-to {
   transform: translateY(40px);
}
.fade-leave-to, .fade-enter {
   transform: translateY(40px);
}


@keyframes gradient {
   0% {
       background-position: 0 50%;
   }
   50% {
       background-position: 100% 50%;
   }
   100% {
       background-position: 0 50%;
   }
}

.buttons__text {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;
   font-size: get-vh(15px);
   line-height: get-vh(18px);
   display: flex;
   align-items: center;
   color: rgba(255, 255, 255, 0.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="" id="app">
      <transition-group tag="ul" name="fade" class="buttons">
         <li class="buttonsall"
          v-if="show || item.id === 4" 
          v-for="( item, index ) in items" 
          :class="{'active':item.id=== 1 && active}"
          @click="checkBlock(item.id)"
          :key="item.id">
             <img class="iconbuttons" :src="item.img">
             <div class="buttons__text">{{ item.text }}</div>
          </li>
      </transition-group> 
   </div>