转换 : all used? 时，JQuery Slide Toggle 在这个粘性页脚上不起作用

Question

我有点不好意思为什么 this Sticky footer不允许滑动切换动画？

是否有特殊原因导致无法正常工作？

#PopupMessage{
    width:95%;
    height:30px;
        background: #999;
    color: #ececec;
    position:fixed;
    bottom:0px; 
    margin:2%;
    padding:1%;
    border-radius:10px;
              -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.9);
              -moz-box-shadow: 0px 5px 5px rgba(0,0,0,.9);
                         box-shadow: 0px 5px 5px rgba(0,0,0,.9);
    transition: all 0.8s;
    display:none;
}

#PopupMessage:hover{
    opacity:0;
}

悬停效果有效，但出于某种原因“slideToggle”在此上下文中不起作用？

我还有一个问题(不确定它是否是元素特定的，因为它不会发生在 fiddle 上)是我的页脚在几秒钟后消失(就像我双击或类似)。

关于为什么会发生这种情况有什么建议吗？

Answer 1

将过渡更改为:

transition: opacity 0.8s;

因为 .slideToggle() 处理 display 属性，而您 hover css 处理 opacity。因此，对于 :hover 只需在 opacity 上应用过渡。它不会影响 slideToggle()。

基于 comment ，其中 OP 希望使用 all 进行转换但不用于 display:

transition: all 0.8s, display: 0s;