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

Posted 2023-02-22

【中文标题】我在 Nuxt 的手风琴上的转换不起作用

【英文标题】：Transition not working on my accordion in 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`)" :>
    </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 并给出了扩展值很大，现在效果很好。

【参考方案1】：

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