Удалить div, когда скрытое уведомление о рычании - PullRequest
Новая
       27

Удалить div, когда скрытое уведомление о рычании

0 голосов
/ 06 июля 2018

У нас есть div в уведомлении рычания ember после того, как уведомление скрывается с анимацией css через 5 секунд ... при проверке, что 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;
    }
}

1 Ответ

0 голосов
/ 06 июля 2018

Мне кажется, я понимаю, в чем проблема. Используя пример, который ember-growl-Notification имеет в своем readme, я заметил, что функция автоматического закрытия рычагов не запускается.

Вы пытались вернуть функцию скрытия с помощью 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}}
...