Question

所以我是css的新手，实际上我是开发人员，但我只想根据要求用css完成这项任务。我有一个div，我想在点击时打开一个固定的div。我已经尝试了一些东西，并在js小提琴设置js fiddle link。我很近。主要的CSS部分是

.portfolio
{
      background: #218592;
    z-index: 0;
    opacity: 0;
  -webkit-transform: translateX(0%);
 -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s; 
  -moz-transform: translateX(0%);
  -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
  transform: translateX(0%);
  transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
  -ms-transform: translateX(0%);
  height: 100%;
  width: 100%;
    position: fixed;
      top: 0;
  left: 0;
}
.display-work
{
    z-index: 1000;
    opacity: 1;
    -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);

  transform: translateX(-100%);

  -ms-transform: translateX(-100%);

}

完整代码可以在JS小提琴上找到

问题

当我点击div时有两个问题

1）div不会在第一次点击时滑动（我可以看到这是我自己而不是先前的任务）

2）固定div正在滑动，但会立即消失

无法找到原因

Answer 1

您需要摆脱opacity:0并切换translateX个地方。

portfolio{
          background: #218592;
        z-index: 0;
      -webkit-transform: translateX(100%);
     -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s; 
      -moz-transform: translateX(100%);
      -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
      transform: translateX(100%);
      transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
      -ms-transform: translateX(100%);
      height: 100%;
      width: 100%;
        position: fixed;
          top: 0;
      left: 0;
    }
    .display-work
    {
        z-index: 1000;
        -webkit-transform: translateX(0%);
      -moz-transform: translateX(0%);

      transform: translateX(0%);

      -ms-transform: translateX(0%);

    }

这是固定的fiddle

css转换规则中的问题

1 个答案: