Question

我有一个Toast消息的滑动切换动画效果，toast消息在CSS中有box-shadow，但是每当切换发生时，box-shadow看起来很奇怪并且在幻灯片完成时恢复正常

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

只需添加保证金：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/

Answer 2

管理用小css规则修复它。

.ui-effects-wrapper {
  overflow: visible !important;
}

JQuery用你在动画中应用overflow: hidden的div包装你的元素。

也许你可以找到一个避免这种情况的选择。

编辑：但它可能不是最佳解决方案。你会有一些不好的副作用。

尝试自己添加一个包装器，添加阴影。仍然为内部div设置动画。

这是一个解决方案https://jsfiddle.net/xfn1j9hs/，不使用jquery来制作动画，而只使用CSS。

JQuery幻灯片用box-shadow切换奇怪的行为

2 个答案: