Question

我正在使用表格元素的过渡以提供非常酷的边框效果，这一切都很好。

我得到的问题是偶尔（不是每次）在页面上刷新每个单独的框将转换为好像所有变量都是空白并且将从（可能）高度0宽度0调整到高度250和宽度它看起来非常难看，有点破坏了网站的整体效果。

我的假设是，无论出于何种原因，过渡所有捕获都是将一些变量误解为零或零，然后从那里转换为250.但是我不能测试这个，据我所知，你不能宽度和高度例外。

我尝试手动设置六个重要参数（轮廓，轮廓偏移，颜色，背景图像，背景位置，背景大小）的过渡，但这只会导致过渡无法正常工作，背景图像只是完全没有过渡而快速打开和关闭......所以必须要继续进行。

这是代码;

#portfolio-table td{
width: 250px;
height: 250px;
min-width: 250px;
min-height: 250px;

box-shadow: inset 0 0 50px 20px rgba(0,0,0,.35);

outline: 3px solid black;
outline-offset: -3px;

color: transparent !important; /* Makes text invisible until hover */

background-position:center;
background-repeat: no-repeat;
background-size: 100%;

text-align: center;

transition: all 1.5s ease-in-out;
    }

#portfolio-table td:hover{
outline: 10px solid white;
outline-offset: -10px;

color: black !important; /* Makes text visible */

box-shadow: inset 0 0 25px 10px rgba(0,0,0,.35);

background-image: url(../images/bg.jpg) !important;
background-repeat: no-repeat;
background-size: 100%;

cursor: pointer;

transition: all 0.5s ease-in-out;
    }

值得注意的是，背景图像是由每个单元格设置的。下面是代码;

#portfolio-table #project1{
background-image: url(../images/project7.jpg);
     }

在悬停中有很多重复（例如，无重复和背景大小），以防止这种异常行为。

正如您所看到的那样，宽度和高度都设置了最小尺寸，但它仍然会像0那样过渡。

This是指向实例的链接;如果你垃圾邮件刷新，你应该注意到效果。

Answer 1

您使用

box-shadow: inset 0 0 25px 10px rgba(0,0,0,.35);

之前我遇到过这个问题，我通过将.35更改为0.35

解决了这个问题

Answer 2

我已将过渡更改为

#portfolio-table td{

    ... 
transition: outline, outline-offset, color, box-shadow, background-image 1.5s ease-in-out;
}

它适用于我。

不寻常的CSS过渡行为。你可以禁用特定参数吗？

2 个答案: