Question

我在转换图像的宽度和高度时遇到麻烦。该图像应该看起来很小，然后变大。但是，当我添加第二个类以过渡高度和宽度时，图像将跳至下一个宽度和高度，而不会过渡属性。任何帮助表示赞赏。预先感谢您的帮助！

我延迟添加第二个类，其中包含调整后的CSS规则，因为我认为将这些类背对背添加会导致错误。在使用setTimeout（）设置了延迟之后，该功能似乎会稍微好一些，因为图像似乎有些移动，但是没有按照预期的方式移动。

<div><img src="Some String"></div>

.lightbox-img { width: 100%; } 

.light-box-small { 
  width: 20vw; 
  height: 10vh; 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  transition: width 1s ease-in; 
  transition: height 1s ease-in; }

.lightbox-container { width: 60vw; height: 30vh; }

const images = document.querySelectorAll('.img'); 
const backdrop = document.querySelector('.backdrop'); 
const lightboxImg = document.createElement('img'); 
const container = document.createElement('div'); 

images.forEach(image => { 
  image.addEventListener('click', () => { 
    lightboxImg.src = image.src; 
    container.appendChild(lightboxImg); 
    container.classList.add('light-box-small'); 
    lightboxImg.classList.add('lightbox-img'); 
    backdrop.classList.add('dim'); 
    document.body.appendChild(container);

     setTimeout(() => { 
      container.classList.add('lightbox-container'); 
     }, 500); 
   }); 
 });

预期结果应如下： 1.图像出现在视口的中心 2.图像从较小的尺寸变为较大的尺寸。

错误发生在第2步，跳至下一个宽度，而不是过渡。

Answer 1

“过渡”规则应位于lightbox-container类上，例如

.lightbox-container { 
    width: 60vw;
    height: 30vh;
    transition: width 1s ease-in; 
    transition: height 1s ease-in; 
}

Answer 2

感谢C14L提供的帮助。不幸的是，将过渡规则应用于灯箱容器无法正常工作。

问题出在当我声明2条CSS过渡规则时，第二条规则将覆盖第一条规则。通过在一个声明中声明规则，它们将不会相互覆盖。因此解决方案是：

application/x-www-form-urlencoded

过渡属性的跳动行为

2 个答案: