javascript - JQuery slide 使用 box-shadow 切换奇怪的行为

Question

我有 toast 消息的滑动切换动画效果，toast 消息在 CSS 中有框阴影，但每当切换发生时，框阴影看起来很奇怪，并在幻灯片完成时恢复正常

HTML

<div class="alert-toaster" style="display: none;">Add to Playlist</div>
<button id="toggle">
Toggle
</button>

CSS:

.alert-toaster {
    width:150px !important;
    height:40px !important;
    height:auto;
    position:absolute;
    right:2%;
    background-color: #C9234C;
    color: #F0F0F0;
    padding:10px;
    text-align:center;
    border-radius: 20px 0 0 20px;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
    -moz-box-shadow:    0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
    box-shadow:         0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
}

JS

$(document).ready(function() {
  $("#toggle").click(function(){
   $(".alert-toaster").show("slide", {direction:"right"}, 500 );
                    setTimeout(function(){
                        $(".alert-toaster").hide("slide", {direction:"right"}, 500 );
                    },2000);
  });
});

Fiddle example

我觉得很奇怪，有什么建议吗？

Answer 1

只需添加 margin: 10px 0 10px 10px; 即可为您的标签留出足够的空间。

.alert-toaster {
    width:150px !important;
    height:40px !important;
    height:auto;
    position:absolute;
    right:2%;
    background-color: #C9234C;
    color: #F0F0F0;
    padding:10px;
    text-align:center;
    border-radius: 20px 0 0 20px;   
      box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75) !important;
    margin: 10px 0 10px 10px;
}

https://jsfiddle.net/mrwsgs58/3/