html - 如何让 translateX 转换在 firefox 中工作？

Question

此代码适用于 Chrome 但不适用于 Firefox。关于如何解决它的任何想法？当您将鼠标悬停在门上时，门应该会打开，横向图像会滚动，但在 Firefox 中，除非鼠标位于右边缘，否则门不会完全打开。 (不允许更改 html 或使用 css 以外的任何内容)

https://jsfiddle.net/rr3nj7dr/

<ul id="calendar"><li><div class = "door">15</div></li></ul>

Answer 1

因为您正在translate()-ing .door(这将移动.door)，所以当您将鼠标悬停在parent li，而不是当你悬停在 .door 上时。

  #calendar {
    width: 550px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  #calendar li {
    list-style: none;
    float: left;
    width: 110px;
    height: 110px;
    position: relative;
    overflow: hidden;
    margin: 30px;
    background-image: url(http://i.imgur.com/C68wDiS.jpg);
  }
  
  .door {
    width: 110px;
    height: 110px;
    position: absolute;
    top: 0px;
    left 0px;
    color: white;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    vertical-align: middle;
    line-height: 110px;
    transition: transform 1s ease-in-out;
    background-color: grey;
  }
  
  #calendar li:hover .door {
    transform: translateX(110px);
  }
  
  #calendar li:hover {
    animation: slidingfour 3s ease-in-out;
  }
  
  @keyframes slidingfour {
    0% {
      background-position: 0px;
    }
    100% {
      background-position: -330px;
    }
  }

<ul id="calendar">
  <li>
    <div class="door">15</div>
  </li>
</ul>