h5页面使用display后动画失效

问题原因

这里动画失效的原因是由于用了display这个属性。
在做这个效果之前，我们先简单了解一下css动画原理。css的动画运作机理是关键帧线性动画，在这个线性的过渡表达中，从始至终都需要这个元素的存在。
但是当display:none时，元素将从文档流中消失，这时候动画作用的元素不见了，自然也就没有动画效果了。

解决方案

通过对问题原因的剖析，我们知道只有文档流占位存在时才能有动画效果。那这里可不可以直接用opacity透明度属性的变化，把display去掉呢？
答案是不可以，透明度的变化只会让元素不可见，但是元素还是处于可以点击的状态。也就是说，如果你的下拉菜单里有超链接之类的可以点击的地方，即使下拉菜单透明度为0时被隐藏，但是这些超链接还是可以点击的。
最佳的解决方案是将display属性换成visibility属性就可以了，用下面的表格来展示这三个属性的区别。

最终效果

将display属性换成visibility属性之后就实现了效果

.side-bar .qr .qr-hover-box {
    visibility: hidden;
    opacity: 0;
    transition: .3s;
}

.side-bar .qr:hover .qr-hover-box {
    visibility: visible;
    opacity: 1;
}