Question

我不知道如何描述这种方法无效，所以我上传了一个截屏视频给你。这真的很奇怪，我在网上找不到类似的东西。它只发生在盒子阴影中，只有在启用转换时才会发生。它适用于过渡和没有框阴影，并且它可以正常使用框阴影并且没有过渡。

编辑：我最初忽略了（我现在意识到这是解释的一个关键部分）是转换延迟为0秒，转换持续时间为150毫秒。不一定重要，但时间功能是轻松的。 devtools计算样式面板显示没有覆盖任何这些属性。

此

这可能是我的CSS的错误，但我无法想象会出现什么样的错误。

观看此视频进行演示。 Video Link on Youtube

注意：此视频以正常速度拍摄。

悬停和转换之间的延迟以及按下按钮和转换之间的延迟不应存在。有没有人知道任何已知的＆＃34;陷阱＆＃34;，错误或地方，以检查可能是什么来源？

注意：我相当肯定它不是我的代码的错误。我现在已经检查了4次并在其他两个浏览器中成功测试了它 - 也就是它的单行简单css。我还在目录中搜索了不同的潜在冲突 - 尽管我不确定该找到什么。

修改：每个请求。以下是用于生成转换的代码。

.navbar-nav {
    li {
        text-align: center;
        a {
                border-radius: 0;
                border-width: 0 0 0 1px;
                border-style: solid;
                color: #808d8e !important;
                box-shadow: 1px 12px 23px hsla(0, 0%, 0%, 0.05) inset;
                border-color: darken(@neutral-light, 9%);
                -webkit-transition: all .15s ease-in-out;
                -moz-transition: all .15s ease-in-out;
                -o-transition: all .15s ease-in-out;
                -ms-transition: all .15s ease-in-out;
                transition: all .15s ease-in-out;
                &:hover {
                    border-color: darken(@neutral-light, 15%);
                    color: @brand-primary !important;
                    box-shadow: 1px 12px 23px hsla(0, 0%, 0%, 0.1)inset, 2px 2px 20px rgba(0, 0, 0, .1);
                    background-color: saturate(lighten(@neutral-light, 8%), 5%);
                }
                &:focus, &:active {
                    color: desaturate(@brand-primary, 5%);
                    background-color: saturate(lighten(@neutral-light, 4%), 0%);
                    box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.3)inset, -1px -12px 23px hsla(0, 0%, 0%, 0.2), 2px 2px 23px rgba(0, 0, 0, .08);
                }
        }
    }
    li:hover + li>a {
        border-left-color: darken(@neutral-light, 15%);
    }
}

这个更少，并按照您的预期进行编译。

附加信息和备注：这发生在41.0.2222.0 canary（64位）上。

注意我发现了一个奇怪的怪癖。如果我设置了负transition-delay，那么转换就会发生。但它以下列方式发生：非常快的背景颜色和颜色开始动画，并完成，并在某个时间点（大致相同）盒子阴影进来。但这是奇怪的事情 - 有一个非常小的窗口可以工作（类似于.2s的区别），所以如果持续时间为.5s，并且我将转换延迟设置为-.4s，我会看到一个过渡到某种程度如上所述。当处理100ms转换时，效果显然是微妙的，但仍然是显着的。但是，如果我将持续时间设置为.5s并将延迟设置为 - .1s，则转换仍然会有明显的视觉延迟。

Answer 1

有没有人知道任何已知的“陷阱”，错误或要检查的地方可能是什么来源＆gt;这个？

您可以使用简写语法将transition属性（/ ies）设置为all，尝试将过渡效果替换为属性列表。

transition: box-shadow .15s ease-in-out;

或

transition: box-shadow,background-color,color,border-color .15s ease-in-out;

all可能引发（不受欢迎的）transitionEnd被引导程序的jQuery插件捕获，并且还会影响性能。

请参阅：http://youtu.be/SnZaGuxvEvE

Chrome或bootstrap css box-shadow transition bug

1 个答案: