弹性布局照片墙的奥秘：揭秘神秘的“视觉BUG”

前端

2023-09-11 13:11:36

弹性布局照片墙项目中的视觉“故障”：修复指南

准备开启一场引人入胜的旅程，踏上修复弹性布局照片墙项目中视觉“故障”的征途。这是一个迷人的项目，但它也带来了一些令人困惑的挑战，就像我们现在要解决的这个谜题：为什么图片在连续双击后，尺寸没有变化，但文本却神奇地滑了进来？

解开谜团：幕后发生的事情

当我们第一次单击图片时，toggleActive()函数应运而生，负责切换图片的活动状态并相应地显示或隐藏文本。然而，当我们再次单击同一图片时，问题就出现了。尽管此时图片已经处于活动状态，但该函数却什么也没做，没有触发任何动画。

这正是问题的根源所在：第二次单击时，尽管toggleActive()函数没有触发动画，但由于图片仍处于活动状态，文本仍然可见。这便制造了一种错觉：图片没有变大，但文本却已出现。

重塑toggleActive()函数：引入动画

要解决这个谜团，我们需要对toggleActive()函数进行微调，即使在图片处于活动状态时也能触发动画。修改后的函数如下：

function toggleActive(element) {
  // 如果图片处于活动状态，隐藏文本
  if (element.classList.contains('active')) {
    element.classList.remove('active');
    element.querySelector('.photo-caption').classList.remove('show');
    element.querySelector('.photo-description').classList.remove('show');

    // 如果图片处于非活动状态，显示文本并添加过渡效果
  } else {
    element.classList.add('active');
    element.querySelector('.photo-caption').classList.add('show');
    element.querySelector('.photo-description').classList.add('show');

    // 为文本添加过渡效果
    element.querySelector('.photo-caption').style.transition = 'all 0.5s ease-in-out';
    element.querySelector('.photo-description').style.transition = 'all 0.5s ease-in-out';
  }
}