title: Animation File Input Javascript
body: <p>I am trying to create an animation when the user chooses a File in the InputFile. But it only runs when I reload the page. So I don't see how I can fix this problem.
  Here is my code.</p>
  <p>Html Erb (Rails) :</p>
  <pre><code> &lt;div class=&quot;box&quot; id=&quot;Box&quot;&gt;
       &lt;%= f.label 'Upload Your Song !', class:'label1', for:'fileUpload' %&gt;
       &lt;%= f.label 'Size: 15mb max', class:'label2', for:'fileUpload' %&gt;
       &lt;%= f.file_field :video, id:'fileUpload', style:'opacity:0;position:absolute;' %&gt;
       &lt;%= f.label 'Choose your file', for:'fileUpload', class:'btn-hover color-1 flex' %&gt;
   &lt;/div&gt;
  </code></pre>
  <p>Script Javascript :</p>
  <pre><code>&lt;script&gt;
      var Browse = document.getElementById(&quot;fileUpload&quot;)
      var File = document.getElementById(&quot;Box&quot;);
      var Upload = document.getElementById(&quot;Uploader&quot;);
      if( Browse.files.length != 0 ){
          File.animate([
            { transform: 'translateY(0px)' },
            { transform: 'translateY(-150px)' }
          ], {
            duration: 1000,
          });
        window.setTimeout( function() {
          File.className += ' fade-in';
        }, 50);
        window.setTimeout( function() {
          File.style.display = 'none';
        }, 1050);
      }
  &lt;/script&gt;
  </code></pre>
  <p>CSS :</p>
  <pre><code>.fade-in {
      opacity: 0;
      transition:             opacity 1s;
          -moz-transition:    opacity 1s;
          -ms-transition:     opacity 1s;
          -o-transition:      opacity 1s;
          -webkit-transition: opacity 1s;
  }
  </code></pre>