【问题标题】:Remove div when ember growl notification is hidden隐藏 ember 咆哮通知时删除 div
【发布时间】:2018-07-06 11:15:35
【问题描述】:

在通知隐藏 5 秒后用 css 动画隐藏后,我们在 ember 咆哮通知中有 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;
    }
}

【问题讨论】:

  • 咆哮声关闭后哪个 div 仍然可见。既然它被隐藏了,为什么会有问题?
  • @TrentonTrama
    在 flash 上关闭咆哮后仍然可见
  • 您是否使用 CSS 过渡来隐藏通知而不是增长的内置计时器?
  • @TrentonTrama 是的

标签: javascript html css ember.js growlnotify


【解决方案1】:

我想我明白问题所在。使用 ember-growl-notification 在其自述文件中的示例,我注意到未触发咆哮的自动关闭功能。

您尝试通过使用 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}}

【讨论】:

  • 这行不通,因为我们需要选择器,并且我们在其中使用了 div 来实现自动化。即 data-test-flash-selector={{notification.type}} 它不适用于 type
  • 您可以在通知方法周围添加标记以添加test-flash-selector
    {{notification.message}}
猜你喜欢
相关资源
最近更新 更多
热门标签