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

【问题标题】：Transition not working in IE and Edge and Safari过渡在 IE 和 Edge 和 Safari 中不起作用
【发布时间】：2017-01-23 18:14:15
【问题描述】：

我在尝试为 IE、Edge 和移动 Safari 中的转换添加转换时遇到问题。有一个元素被另一个类转换为另一个类，该类是用 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));
}

这些类会在点击事件中添加

.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);

【问题讨论】：

transition: (1.2s, all, cubic-bezier(0.22, 0.44, 0, 1)); 应该是 transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1); 对于速记属性，您使用空格而不是逗号分隔不同的转换属性，并且不要将它们括在括号中。
此外，您有 transform: translateY(-100%) translateY(88px); 为同一个 translateY 属性定义了两种不同的翻译。你确定这就是你想要的吗？
transform: translateY(-100%) translateY(88px); 是需要的，因为 IE 无法在 translateY 内进行计算，但语法如您所述。
对于翻译 css，我使用如下所有前缀：-webkit-transform: ..., -moz-transform:..., -ms-transform:..., -o-transform:..., transform:.... 也许这对你有帮助。

标签： css internet-explorer-11 microsoft-edge

【解决方案1】：

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

【讨论】：