1

Galera montei um sistema de input parecido com o android, o problema e que não estou conseguindo fazer a mesma animação no select.

Alguém poderia me ajudar?

Segue o código:

Código funcionando jsfiddle

OBS: Quero deixar a animação do select, igual ao do input.

2
  • Olá Hugo, bem vindo ao StackOverflow em Português. Vejo que é novo no site, então aconselho a fazer um tour para entender melhor como o SOpt funciona. Poderia explicar melhor como seria essa animação? Quanto mais informações você fornecer, mais fácil será para conseguir ajuda.
    – Randrade
    18/02/2016 às 13:53
  • bom coloquei um link com o código funcionando, queria deixar a animação igual ao do input, que também esta no código. 18/02/2016 às 15:05

2 Respostas 2

1

Entendi o que você quer. Fiz algumas alterações.
No HTML, na primeira div:

<div class='form-group-select'>
   <label class='control-label'>CENTRO DE CUSTO</label>
   <select name='banco' class='select form_campos form_campos_numeros'>
      <option value='0'></option>
      <option value='1'>custo</option>
      <option value='2'>custo</option>
   </select>
</div>

No Jquery, a partir da linha 5, apaga tudo e poe:

$('.select').on('change', function(e) {
   $(this).parents('.form-group-select').toggleClass('focused', (e.type === 'focus' || this.value > 0));
}).trigger('blur');

No CSS, linha 24:

.form-group.focused .control-label, .form-group-select.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

Só mudei essas partes, restante continua igual.

9
  • OK, fiz as alterações porem não deu certo, olha como ficou o código igual ao que vc me passou: jsfiddle.net/kt8tqpkg/1 18/02/2016 às 17:11
  • A animação que vc diz é o label do input correto? Quando está vazio fica escrito "Centro de custo" ai quando ele muda de opção o "Centro de custo" sobe e embaixo fica o valor correto? Ou é outra coisa? 18/02/2016 às 17:15
  • Sim isso mesmo, deu certo aqui, foi eu que fiz errado hahah. muito obrigado. 18/02/2016 às 17:18
  • Mas com essa animação no select ficou com as alterações que te passei. Está no change do select. Se quiser a animação ao clicar no select troca a linha 5 do jquery de 'change' para 'focus blur' como está o input 18/02/2016 às 17:21
  • amigo achei um problema, poderia me ajudar? Seguinte notei que em campos onde o select ja vem preenchidos a animação não ocorre, e ela so funciona para value que seja numérico. Poderia me ajudar? Segue o código com o problema.jsfiddle.net/kt8tqpkg/2 18/02/2016 às 18:16
0

Hugo, precisei fazer uma implementação semelhante a algum tempo, vou postar ela aqui, talvez lhe ajude à lhe dá uma ideia.

var containers = document.querySelectorAll(".container");

[].forEach.call(containers, function(container, indice) {
  var input = container.querySelector("input, select");  
  input.addEventListener("focus", function () {
    container.classList.add("hasFocus");
  });

  input.addEventListener("blur", function () {
    container.classList.remove("hasFocus");
  });

  input.addEventListener("input", function () {
    if (input.value || input.selectedIndex > 0) {
      container.classList.add("hasValue");
    } else {
      container.classList.remove("hasValue");
    }
  });
  
  var event = new Event("input");
  input.dispatchEvent(event);
});
.container {
  position: relative;
  height: 55px;
  width: 200px;
}

.container input, .container select {
  position: absolute;
  top: 20px;
  bottom: 5px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  border: 0px none transparent;
  outline: none;
  box-sizing: border-box;  
  
  background-color: transparent;  
  border-bottom: 1px solid gray;
}

.container input {
  padding-left: 4px;
}

.container.hasFocus input,
.container.hasFocus select{
  border-bottom: 1px solid teal;
}

.container label {
  position: absolute;
  top: 25px;
  left: 4px;
  transition: top 0.3s linear;
  color: gray;
}

.container.hasFocus label {
  color: teal;
}

.container.hasFocus label,
.container.hasValue label
{
  top: 0px;
}
<div class="container">  
  <input id="field1" type="text" />
  <label for="field1">Campo 01</label>
</div>

<div class="container">  
  <input id="field2" type="text" value="Hello Wolrd" />
  <label for="field2">Campo 02</label>
</div>

<div class="container">  
  <select id="sel1">
    <option value=""></option>
    <option value="1">Opcao 1</option>
    <option value="2">Opcao 2</option>
    <option value="3">Opcao 3</option>
    <option value="4">Opcao 4</option>    
  </select>
  <label for="sel1">Select 01</label>
</div>

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 .