Contact Form made with Vue TS,

Community feedback

• 

  Pablo Vasconcelos•60

  @Pablo321123Posted 5 months ago

  Ficou ótima a apresentação!! Como você fez aquela animação no alert quando o form é submetido?

  1

  ---

  

  Kelly Cristina dos Santos•120

  @kellycsantosPosted 5 months ago

  @Pablo321123 acredito que aplicar um display absolute com top negativo resolveria essa questão e quando o formulário fosse submetido alterar a classe pro top ser igual a 0. Também adicionar um setTimeout pra esconder a div/span novamente

  2

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 5 months ago

  Olá Pablo, obrigado pelo Feedback!

  Sobre a animação daquele alert, você pode ver ela aqui: SuccesModalComponent.

  Mas resumindo, eu utilizei um position: fixed; para fazer com que o alerta ficasse fixo na mesma parte do topo da tela, assim se você usar o scroll para baixo ou para cima, ele ainda se manteria ali no topo. E usei Keyframes para definir a posição do alerta, que foram essas linhas:

      @keyframes move-in {
          from {
              top: -100vh;
          }
          to {
              top: 24px
          }
      }
  
      @keyframes move-out {
          from {
              top: 24px
          }
          to {
              top: -100vh;
          }
      }
  

  Que respectivamente, fazem o alerta entrar na tela e depois sair. O que permite com que ele tenha essas duas animações é esse trecho:

  animation: 
      move-in 1.5s cubic-bezier(0.3,-0.5,0.5,1.5) forwards, 
      move-out 1.5s cubic-bezier(0.3,-0.5,0.5,1.5) 5s forwards; 
  

  Caso tenha ficado alguma duvida, por favor pergunte abaixo que tentarei esclarecer da melhor forma possível, e novamente, obrigado pelo feedback! ^^

  1

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 5 months ago

  Olá Kelly, sim essa forma que você falou também funcionaria, até havia feito utilizando o Timeout, mas achei que seria preguiçoso da minha parte, então optei por fazer isso através de animações, já que eu queria praticar mais com as animações.

  E só uma pequena correção, o correto seria position: fixed; ao invés de display e absolute. O motivo de ser fixed e não absolute, é para evitar que o alerta suma em telas que tem scroll, assim, se a página fosse maior na vertical, e o usuário fizesse um scroll down, o alerta ainda continuaria na tela dele.

  0

  

  Pablo Vasconcelos•60

  @Pablo321123Posted 5 months ago

  @R3ygoski Show de bola, valeu demais pela explicação!!! Vou tentar fazer para praticar o animation no css.

  1

  

  Pablo Vasconcelos•60

  @Pablo321123Posted 5 months ago

  @kellycsantos Entendiii, valeu demais Kelly!!

  0