Problem with animation in select

Question

Problem with animation in select

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Galera I put together an input system similar to android, the problem and I'm not able to do the same animation in the select.

Could anyone help me?

Follow the code:

Running jsfiddle code

NOTE: I want to leave the select animation equal to the input.

html jquery css

asked by anonymous 18.02.2016 / 14:49

2 answers

0

Hugo, I had to make a similar implementation for some time, I'll post it here, maybe it will help you to give you an idea.

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>

18.02.2016 / 19:41

How to configure Laravel 4 to automatically detect which environment I am in (production and development)? Replace file name strings with Windows PowerShell

score 1 · Accepted Answer

I understood what you want. I made some changes. Home In HTML, in the first 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>

In Jquery, from line 5, delete everything and poe:

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

In CSS, line 24:

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

I just changed these parts, the rest remains the same.