2

Tenho um <mat-divider></mat-divider> e preciso fazer com que ele seja revelado da esquerda para a direita, como se fosse uma barra de progresso sendo preenchida

Alguém tem algum exemplo para me apresentar? Só consegui encontrar com javascript

@Edit:

Adicionando exemplo:

@-moz-keyframes roll {
	0% { width:0; }
  100% { width:100%; }
}

@-webkit-keyframes roll {
	0% { width:0; }
  100% { width:100%; }
}

.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
  }
  .multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
    background-color: #ededed;
  }

  .multi-steps > li.is-active-acao-lojista:before, .multi-steps > li.is-active-acao-lojista ~ li:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
  }
  .multi-steps > li.is-active-acao-lojista:after, .multi-steps > li.is-active-acao-lojista ~ li:after {
    background-color: #ededed;
  }
  
  .multi-steps {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  
  .multi-steps > li {
    counter-increment: stepNum;
    text-align: center;
    display: table-cell;
    position: relative;
    color: #a1c642;
    z-index:99!important;
    
  }

  .multi-steps > li.is-active {
    color: #a1c642!important;
    
  }

  .multi-steps > li.is-active-acao-lojista {
    color: darkorange!important;
    
  }

  .multi-steps > li:before {
    content: '\f00c';
    content: '\2713;';
    content: '\10003';
    content: '\10004';
    content: '\2713';
    display: block;
    margin: 0 auto 4px;
    background-color: #fff;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    border-width: 2px;
    border-style: solid;
    border-color: #a1c642;
    border-radius: 50%;

  }
  .multi-steps > li:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: #a1c642;
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: -1;
  }


  .multi-steps > li:last-child:after {
    display: none;
  }
  .multi-steps > li.is-active-acao-lojista:before {
    background-color: #fff;
    border-color: darkorange;
  }
  .multi-steps > li.is-active:before {
    background-color: #fff;
    border-color: #a1c642;;
    
  }
  .multi-steps > li.is-active ~ li {
    color: #808080;
    
  }
  .multi-steps > li.is-active ~ li:before {
    background-color: #ededed;
    border-color: #ededed;
    
  }

  .multi-steps > li.is-active-acao-lojista ~ li {
    color: #808080;
  }
  .multi-steps > li.is-active-acao-lojista ~ li:before {
    background-color: #ededed;
    border-color: #ededed;
  }
                                    <ul class="list-unstyled multi-steps">
                                      <li>Pedido recebido</li>
                                      <li [class.is-active]="pedido.status == 'book_product' && pedido.id_Nota_fiscal == null">Pagamento aprovado</li>
                                      <li [class.is-active-acao-lojista]="pedido.status == 'payment_received' && pedido.id_Nota_fiscal == null">Faturar pedido</li>
                                      <li [class.is-active-acao-lojista]="pedido.status == 'payment_received' && pedido.id_Nota_fiscal !== null">Enviar dados rastreio</li>
                                      <li>Confirmar entrega</li>
                                    </ul>

Eu preciso aplicar a animação roll no ultimo elemento li:after que possui o background-color #a1c642

Tentei:

  .multi-steps > li:after:last-child{
      animation-name: roll;
      animation-duration: 5s;
      animation-timing-function: linear;
  }

mas nada acontece

3

1 Resposta 1

2

Seu CSS está com um problema na construção dessa classe.

Isso:

.multi-steps > li:after:last-child

Deveria ser isso:

.multi-steps > li:last-child:after

Repare na posição do ::after

Outro problema é a lógica do que vc quer fazer, repare que se vc vai animar o ::after do last-child ele vai animar para fora do "componente"... não sei se é isso que vc quer.


EDIT

Repare que no CSS do seu comentário vc escreveu errado! Na última linha vc acabou por zerar todos os valores da sua animação quando escrever

animation: forwards !important; 

Dessa forma vc deixa tudo "zerado" e o único parâmetro da animação fica sendo o forwards ai a animação não funciona!

O correto seria:

animation-fill-mode: forwards !important; 

inserir a descrição da imagem aqui

Recomendo essa leitura: CSS deve ser Shorthand ou Longhand

Segue o código da imagem acima, acredito que com ele vc consiga chegar no resultado que espera.

@-moz-keyframes roll {
  0% { width:0; }
  100% { width:100%; }
}

@-webkit-keyframes roll {
  0% { width:0; }
  100% { width:100%; }
}

.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
  }
  .multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
    background-color: #ededed;
  }

  .multi-steps > li.is-active-acao-lojista:before, .multi-steps > li.is-active-acao-lojista ~ li:before {
    content: counter(stepNum);
    font-family: inherit;
    font-weight: 700;
  }
  .multi-steps > li.is-active-acao-lojista:after, .multi-steps > li.is-active-acao-lojista ~ li:after {
    background-color: #ededed;
  }
  
  .multi-steps {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  
  .multi-steps > li {
    counter-increment: stepNum;
    text-align: center;
    display: table-cell;
    position: relative;
    color: #a1c642;
    z-index:99!important;
    
  }

  .multi-steps > li.is-active {
    color: #a1c642!important;
    
  }

  .multi-steps > li.is-active-acao-lojista {
    color: darkorange!important;
    
  }

  .multi-steps > li:before {
    content: '\f00c';
    content: '\2713;';
    content: '\10003';
    content: '\10004';
    content: '\2713';
    display: block;
    margin: 0 auto 4px;
    background-color: #fff;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    border-width: 2px;
    border-style: solid;
    border-color: #a1c642;
    border-radius: 50%;

  }
  .multi-steps > li:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: #a1c642;
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: -1;
  }


  .multi-steps > li:last-child:after {
    display: none;
  }
  .multi-steps > li.is-active-acao-lojista:before {
    background-color: #fff;
    border-color: darkorange;
  }
  .multi-steps > li.is-active:before {
    background-color: #fff;
    border-color: #a1c642;;
    
  }
  .multi-steps > li.is-active ~ li {
    color: #808080;
    
  }
  .multi-steps > li.is-active ~ li:before {
    background-color: #ededed;
    border-color: #ededed;
    
  }

  .multi-steps > li.is-active-acao-lojista ~ li {
    color: #808080;
  }
  .multi-steps > li.is-active-acao-lojista ~ li:before {
    background-color: #ededed;
    border-color: #ededed;
  }
  
  .multi-steps > li:after{ 
  width: 0!important; 
  animation-name: roll !important; 
  animation-timing-function: linear !important; 
  animation-duration:5s !important; 
  animation-fill-mode: forwards !important; 
}

  
<ul class="list-unstyled multi-steps">
  <li>Pedido recebido</li>
  <li [class.is-active]="pedido.status == 'book_product' && pedido.id_Nota_fiscal == null">Pagamento aprovado</li>
  <li [class.is-active-acao-lojista]="pedido.status == 'payment_received' && pedido.id_Nota_fiscal == null">Faturar pedido</li>
  <li [class.is-active-acao-lojista]="pedido.status == 'payment_received' && pedido.id_Nota_fiscal !== null">Enviar dados rastreio</li>
  <li>Confirmar entrega</li>
</ul>

3
  • Não é muito bem o que eu preciso :/ , eu acho que eu preciso aplicar no angular uma classe preencheStatus que seria algo tipo: .preencheStatus{ .multi-steps > li:after{ width: 0!important; animation-timing-function: linear!important; animation-name: roll!important; animation-duration:5s!important; animation: forwards!important; } } Commented 7/02/2019 às 16:17
  • Porém dessa forma nao está aplicando a animação no li Commented 7/02/2019 às 16:19
  • @RenatoVeronese mas esse seu CSS ai está errado, vc vao colocando todos os parâmetros da animação e depois na última linha vc colocou animation: forwards!important; escrever assim elimina todos os outros valores que vc colocou na animação... o certo seria escrever animation-fill-mode: forwards !important; . Repare que eu editei o CSS da minha resposta e deixei os detalhes lá.
    – hugocsl
    Commented 7/02/2019 às 16:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .