I have an accordion of brands that opens and closes, the problem is that the animation for it to close and open in 0.5 seconds doesn't work.

The code is shown below

below is my template for the animation

<template>
  <div >
    <p >SOME OF OUR CLIENTS AND FRIENDS</p>
    <div  :>
      <img v-for="(brand, index) in clients" :key="index" :src="require(`@/assets/brands/${brand.src}`)" :alt="brand.src">
    </div>
    <div >
      <button @click.prevent="closedClients=!closedClients">
        {{ closedClients ? 'View All Clients' : 'View Less Clients' }}
      </button>
    </div>
  </div>
</template>

below is the script

data() {
  return {
    clients: [
      {src: 'arts.png', link: '/blog/'},
      {src: 'kingsCollege.png', link: '/blog/'},
      {src: 'kpmg.png', link: '/blog/'},
      {src: 'mandc.png', link: '/blog/'},
      {src: 'nhs.png', link: '/blog/'},
      {src: 'starbucks.png', link: '/blog/'},
      {src: 'uber.png', link: '/blog/'}
    ],
    closedClients: true
  }
},

and finally the CSS

.brands {
  background: #fff;
  width: 100%;
}

.brands-title {
  color: #002047;
  font-weight: 500;
  font-size: 18px;
}

.brands-logos {
  height: cover;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 70px;
  transition: height .5s;
}

.brands-logos img {
  max-width: 210px;
  max-height: 92px;
  object-fit: scale-down;
}

.brand-center button {
  color: #fff;
  background: #002047;
  padding: 22px 43px;
}

.open-clients {
  height: 100px;
  overflow: hidden;
}

the brands-logos is where the animation is specified and how long it should run.

and the open-clients class is what is attached for the expanding and closing of the accordion.

and even though the mobile version code isn't here, the only time I notice an animation is when I change screens on resizing.

CodePudding user response：

Setting the height to something that does exist auto for example and adding a max-height fixed the issue here!