css 转换规则中的问题

Question

所以我是 css 的新手，实际上我是一名开发人员，但我只想根据要求用 css 完成这项任务。我有一个 div，我想在点击时打开一个固定的 div。我已经尝试了一些东西并在 js fiddle 上进行了设置，这里是 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 fiddle

问题

当我点击 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 转换规则中的问题

issues in css transform rule

html

css

css-transforms