javascript - CSS 过渡不适用于 IE11

Question

我试图让粘性页脚从顶部淡入淡出到底部。我的代码似乎适用于 Google Chrome、Firefox 等。但它根本不适用于 IE11。 下面是我的 CSS 代码。 有谁知道如何解决这个问题？

.sticky-footer-show {
  overflow-y: hidden;
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
       -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
          transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
} //.sticky-footer-show

.sticky-footer-remove {
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
       -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
          transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
          
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  height: 0;
} //.sticky-footer-remove

Answer 1

您可能正在寻找 -ms- 前缀

但根据这个答案 CSS3 + Javascript - Will -ms-transition:opacity 1s ease-in-out; work in IE 10 alone?，它也应该只与过渡一起工作

但是 Internet Explorer 就是 Internet Explorer，可能会有一些阻碍。

.sticky-footer-show {
  overflow-y: hidden;
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
       -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
      -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
          transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
} //.sticky-footer-show

.sticky-footer-remove {
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
       -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
      -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
          transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
          
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  height: 0;
} //.sticky-footer-remove

您是否尝试过在转换命令中全部使用它？

 .sticky-footer-show, .sticky-footer-remove {
    -webkit-transition: transform 1s cubic-bezier(0, 1, 0.5, 1);
         -o-transition: transform 1s cubic-bezier(0, 1, 0.5, 1);
        -ms-transition: transform 1s cubic-bezier(0, 1, 0.5, 1);
            transition: transform 1s cubic-bezier(0, 1, 0.5, 1);
 }
 .sticky-footer-remove {
       height: 0;
 }

建议:不要尝试用花哨的图形 doda 来支持 IE11。让他们快速转移到其他状态，但让您的网页正常运行。现在将使用 IE11，因为一半的互联网都坏了，并在某个时候转移到 chrome/firefox/edge。