Question

我遇到了一个非常奇怪的情况。我的页面有一个滑动面板，默认情况下使用CSS转换关闭。还有一个css过渡应用于它。当我有一个select元素（打开“multiple”属性）时，css转换会在页面加载时触发，从transformX（0）滑动到我应该默认的transformX（100％）。另一个奇怪的事情是，如果我将我的CSS复制到样式元素而不是外部链接，问题就会消失。问题只发生在Chrome上（我的版本是51，在MAC上）我试图建立一个小提琴，https://jsfiddle.net/jejq5s63/，但问题也不会出现在那里，即使我的css链接到外部。这是我的代码。

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="http://www.uvm.edu/~enewbury/fiddle.css">
</head>
<body>
    <aside></aside>

    <select multiple>
        <option value="1">1</option>
        <option value="2" selected="selected">2</option>
        <option value="3" selected="selected">3</option>
        <option value="4">4</option>
        <option value="5" selected="selected">5</option>
        <option value="6" selected="selected">6</option>
        <option value="7">7</option>
    </select>
</body>
</html>

这是CSS（请记住，它只会在外部链接时导致故障）

aside{
  background: #ddd;
  position: absolute;
  right: 0;
  width: 450px;
  height: 500px;
  transform: translateX(100%);
  transition: transform .6s; 
}

这是它的作用的gif。 Gif of animation

Answer 1

我经历过类似的效果。我注意到只有当<select>元素在其中一个selected中有option状态时才会发生。

如果不是这种情况，则转换不会生效。

Chrome可能的错误：页面上的多个选择元素导致css转换在页面加载时触发

1 个答案: