Question

我试图让粘性页脚从顶部淡入并淡出到底部。我的代码似乎对谷歌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?

，它也应该只是过渡

但是，互联网浏览器是互联网资源管理器，可能会有一些阻碍它的东西。

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

建议：不要尝试使用花哨的图形转换器来支持IE11。让他们快速转移到其他州，但让您的网页正常运行。 IE11将被用于现在半数互联网被破坏并在某些时候转移到chrome / firefox / edge。

CSS Transition不适用于IE11

1 个答案: