CODEWITHSUNDEEP
htmlcssvue.jsnuxt.js
Opeyemi Odedeyi
Opeyemi Odedeyi

Reputation: 780

Transition not working on my accordion in Nuxt

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 class="brands">
    <p class="brands-title">SOME OF OUR CLIENTS AND FRIENDS</p>
    <div class="brands-logos" :class="{ 'open-clients': closedClients }">
      <img v-for="(brand, index) in clients" :key="index" :src="require(`@/assets/brands/${brand.src}`)" :alt="brand.src">
    </div>
    <div class="brand-center">
      <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.

Upvotes: 0

Views: 451

Answers (1)

kissu
kissu

Reputation: 46814

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

Upvotes: 2

Related Questions