过渡不适用于我在 Nuxt 中的手风琴

Question

我有一个打开和关闭的手风琴品牌，问题是它在 0.5 秒内关闭和打开的动画不起作用。

代码如下

下面是我的动画模板

<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>

下面是脚本

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
  }
},

最后 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;
}

brands-logos 是指定动画的位置以及它应该持续多长时间运行。

而open-clientsclass是手风琴的展开和收拢的附件

虽然这里没有移动版本代码，但我唯一注意到动画的时候是在调整大小时切换屏幕。

Answer 1

例如将 height 设置为确实存在的东西 auto 并添加 max-height 解决了这里的问题！

过渡不适用于我在 Nuxt 中的手风琴

Transition not working on my accordion in Nuxt

html

css

vue.js

nuxt.js