通知在 5 秒后用 css 动画隐藏后,我们在 ember growl 通知中有 div ...在检查元素时仍然可以看到 div。我想删除这个 div 元素
<div class="ember-growl-container">
{{#ember-growl-notification-placeholder as |notification close| }}
<div class="ember-growl-notification-item-container ember-view {{if notification.isSuccess 'ember-success' 'ember-error'}}" data-test-flash-selector={{notification.type}}>
{{notification.message}}
<div class=" col-md-1 ">
<button onclick={{action close}} class="ember-close">X</button>
</div>
</div>
{{/ember-growl-notification-placeholder}}
</div>
CSS 类
.ember-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
box-shadow: 1px 1px 1px 1px;
opacity: 1;
border: 1px solid transparent;
background-image: none;
font-family: unset;
text-align: left;
font-weight: 700;
top: 10%;
box-sizing: border-box;
z-index: 5000;
padding: 9px;
display: inherit;
border-radius: 4px;
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
.ember-close {
border: none;
background-color: #d4edda;
color: #155724;
}
}
最佳答案
我想我明白问题是什么了。使用 ember-growl-notification 在他们的自述文件中的示例,我注意到 growl 的自动关闭功能没有被触发。
您已尝试通过使用 css 转换恢复隐藏功能,但 CSS 实际上并没有删除元素。
试试这个。
{{#ember-growl-notification-placeholder as |notification close| }}
{{#ember-growl-notification-item type=notification.type timeout=notification.timeout}}
{{notification.message}}
<button onclick={{action close}} class="ember-close">X</button>
{{/ember-growl-notification-item}}
{{/ember-growl-notification-placeholder}}
关于javascript - 隐藏 Ember 咆哮通知时删除 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51209208/