Question

我有以下CSS：

.popup {
  background-color: white;
  border-style: solid;
  z-index: 1001;
  box-shadow: 15px 15px 10px rgba(0,0,0,.3);
  border-radius: 3px;
  position: absolute;
  -webkit-transition: -webkit-transform 1s ease;
  -moz-transition: -moz-transform 1s ease;
  -o-transition: -o-transform 1s ease;
  -ms-transition: -ms-transform 1s ease;
  transition: transform 1s ease;
}

.centered {
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hidden {
  top:100%;
  visibility: hidden;
}

.visible {
  top: 50%;
}

我尝试做的是在弹出窗口可见时执行动画bottom->top，在隐藏弹出窗口时top->bottom执行动画。

之前，我正在使用transition: all 1s ease;并且它正在运行，但它很滞后所以我决定使用transition: transform 1s ease;。即使我认为代码应该没问题，转换也不再起作用了。有谁知道为什么以及如何解决它？

谢谢。

修改

这是一个有效的CodePen示例：

http://codepen.io/andipavllo/pen/QyeJjq

这是一个不成功的例子：

http://codepen.io/andipavllo/pen/KVOrgQ

它们完全相同，除了transition: transform 1s ease;而不是“过渡：所有1轻松;

Answer 1

以前当你有transition: all 1s ease时，翻译和顶级值会变得动画。但是，一旦您将其更改为transition: transform 1s ease top，就会遗漏该属性。

 .popup {
      background-color: white;
      border-style: solid;
      z-index: 1001;
      box-shadow: 15px 15px 10px rgba(0, 0, 0, .3);
      border-radius: 3px;
      position: absolute;
      -webkit-transition: -webkit-transform 1s ease; 
      -moz-transition: -moz-transform 1s ease;
      -o-transition: -o-transform 1s ease;
      /* edited the line below by adding top also*/
      transition: transform 1s ease, top 1s ease;
    }

    .centered {
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .hidden {
      top: 100%;
      visibility: hidden;
    }

    .visible {
      top: 50%;
    }

Answer 2

在工作示例中，您正在转换all属性，而不仅仅是transform属性：这很重要，因为top属性也涉及效果，从100%到50%（当您删除课程hidden并添加课程visible）时。

如您所知，如果您更改

transition: transform 1s ease;

到

transition: transform 1s ease, top 1s ease;

过渡按预期工作。

Answer 3

Check this pen

CSS：将您的CSS修改为以下

.popup {
  ...
  transition: transform 1s ease, top 1s ease;
}

如果没有必要，也不要使用供应商前缀。对于转换，仅需要-webkit。并且对于转换-ms和-webkit将完成这项工作。

CSS转换不适用于转换

3 个答案: