effect with jQuery in select

Question

Good am mounting a custom input with the style of the material google design.

The effect is working on the input, but in select it’s not working. Does anyone know what I’m doing wrong?

Note: The effect I refer to is that of the blue line below the select.

$(document).ready(function() {

  // Efeito do label
  $('.form_campos').on('focus blur', function(e) {
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
    $(this).parents('.form-group').toggleClass('animate', (e.type === 'focus'));
  }).trigger('blur');
  $('.select').on('change blur', function(e) {
    $(this).parents('.form-group-select').toggleClass('focused', (e.type === 'focus' || this.value !== ''));
  }).trigger('blur');

  // Auto focus
  $(".autofocus").trigger('focus');

  // Verifica se o input esta disabilitado
  $('input:disabled').addClass('form_disabled');

  // Verifica se o select esta disabilitado
  $('select:disabled').addClass('select_disabled');

  // Converte minusculas em maiusculas
  $('input').not('[name="link"]').on('input', function() {

    // Armazena posição corrente do cursor
    var start = this.selectionStart,
      end = this.selectionEnd;
    this.value = this.value.toUpperCase();

    // Restaura posição armazenada anteriormente.
    this.setSelectionRange(start, end);
  });
});

/* Input */

.form-group {
  margin-top: 20px;
  position: relative;
  display: flex;
  height: 45px;
  float: left;
}

.form-group::after {
  width: 100%;
  height: 2px;
  background: #0091FF;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  transform: scaleX(0);
  transition: ease-in-out 240ms all;
}

.form-group.animate::after {
  transform: scaleX(1);
}

.control-label {
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  transform: translate3d(5px, 22px, 0) scale(1);
  transform-origin: left top;
  transition: 240ms;
}

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

.form_campos {
  height: 31px;
  width: 100%;
  color: #484848;
  align-self: flex-end;
  padding: 5px;
  outline: none;
  border: 0 solid #484848;
  border-bottom-width: 1px;
  background: transparent;
  border-radius: 0;
}

.form_campos:hover,
.form_campos:focus {
  border-color: #0091FF;
}

.form_disabled,
.form_disabled:hover,
.form_disabled:focus {
  border-color: #D7D7D7;
}


/* Select */

.select {
  height: 31px;
  color: #484848;
  border-radius: 0;
  border: 0 solid #484848;
  border-bottom-width: 1px;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  outline: none;
  margin-top: 14px;
  background: transparent;
  padding-right: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.select::after {
  width: 100%;
  height: 1px;
  background: #0091FF;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  transform: scaleX(0);
  transition: ease-in-out 240ms all;
}

select::-ms-expand {
  display: none;
}

.select:hover,
.select:focus {
  border: 0 solid;
  border-bottom-width: 2px;
  border-color: #0091FF;
  transform: scaleX(1);
}

.form-group-select {
  margin-top: 20px;
  position: relative;
  height: 45px;
  float: left;
}

.form-group-select:after {
  content: "\279C";
  color: #484848;
  transform: rotate(90deg);
  right: 8px;
  top: 22px;
  position: absolute;
  pointer-events: none;
}

.select_disabled,
.select_disabled:hover,
.select_disabled:focus {
  border: 0 solid;
  border-bottom-width: 1px;
  border-color: #D7D7D7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='form-group'>
  <label class='control-label' for='nome'>NOME</label>
  <input type='text' class='form_campos' id='nome' name='nome'>
</div>
<br><br><br><br><br><br>
<div class='form-group-select'>
  <label class='control-label'>GOSTOU?</label>
  <select name='gostou' class='select form_campos'>
                    <option value="s">SIM xxxxxxxxxxxxxx</option>  
                    <option value="n">NÃO xxxxxxxxxxxxxx</option>
                </select>
</div>

Answer 1

In the jQuery code change change for focus to match function validation toggleClass(). Also add one more line within the function select to set the animation. Thus staying the function:

  $('.select').on('focus blur', function(e) {
    $(this).parents('.form-group-select').toggleClass('focused', (e.type === 'focus' || this.value !== ''));
    $(this).parents('.form-group-select').toggleClass('animate', (e.type === 'focus'));

Already in the CSS:

Add:

.form-group-select.animate::after {
  transform: scaleX(1);
}

Alter:

.select::after {
  width: 100%;
  height: 1px;
  background: #0091FF;
  position: absolute;
}

.select:hover,
.select:focus {
  border: 0 solid;
  border-bottom-width: 1px;
  border-color: #0091FF;
  transform: scaleX(1);
}

.form-group-select:after {
    width: 100%;
    height: 2px;
    background: #0091FF;
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    transform: scaleX(0);
    transition: ease-in-out 240ms all;
}

The animation takes place at the div level (<div class='form-group-select'>) and not from select, so changes in both classes. Already in .select:hover,.select:focus you should decrease the width of the border to 1px so that the edge does not increase in size when "focused".

See the DEMO