过渡在 IE、Edge 和 Safari 中不起作用

Question

我在尝试为 IE、Edge 和移动版 Safari 中的转换添加转换时遇到问题。有一个元素被另一个 class 转换，另一个 class 添加了 jQuery。全高元素的css如下所示：

.post-hero {
   height: calc(100% - 178px);
   width: 100%;
   position: fixed;
   left: 0;
   padding: 0 25px;
   margin-top: 128px;
   transition: (1.2s, all, cubic-bezier(0.22, 0.44, 0, 1));
}

并且这个 classes 被添加到点击事件中

.up {
   transform: translateY(-100%) translateY(88px);
}

.down {
  transform: translateY(+100%) translateY(88px);
}

转换在 Firefox 和 Chrome 中运行良好。但其他浏览器应该也支持它(http://caniuse.com/#search=transition)

编辑

一切都与语法有关。 transition: (1.2s, all, cubic-bezier(0.22, 0.44, 0, 1)); 无效 CSS。应该是 transition: 1.2s all cubic-bezier(0.22, 0.44, 0, 1);

Answer 1

如上所述，它是缺少元标记的组合：<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 和用于转换 transition: (1.2s, all, cubic-bezier(0.22, 0.44, 0, 1)); 的错误 CSS 语法，应以这种方式声明：transition: 1.2s all cubic-bezier(0.22, 0.44, 0, 1);

过渡在 IE、Edge 和 Safari 中不起作用

Transition not working in IE and Edge and Safari

css

internet-explorer-11

microsoft-edge