我在 Nuxt 的手风琴上的转换不起作用答案

【问题标题】：Transition not working on my accordion in Nuxt我在 Nuxt 的手风琴上的转换不起作用
【发布时间】：2022-01-20 05:32:23
【问题描述】：

我有一个可以打开和关闭的品牌手风琴，问题是它在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-clients 类是为手风琴的展开和关闭而附加的。

即使移动版代码不在这里，我唯一注意到动画的时候是我在调整大小时更改屏幕。

【问题讨论】：

height: cover 显然不是valid value。从来没有见过这个，它不在文档中。错误可能来自这里。
@kissu 解释了很多，谢谢
您解决错误了吗？
是的，您的评论给了我一个想法，我更改了height: auto 它没有用，因为我注意到要使动画正常工作，您需要指定高度，所以我最终使用了max-height 并给出了扩展值很大，现在效果很好。

标签： html css vue.js nuxt.js

【解决方案1】：

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

【讨论】：