时间戳

首页 > 解决方案 > 动画文件输入 Javascript

javascript - 动画文件输入 Javascript

问题描述

当用户在 InputFile 中选择一个文件时，我正在尝试创建一个动画。但它只在我重新加载页面时运行。所以我不知道如何解决这个问题。这是我的代码。

Html Erb（导轨）：

 <div class="box" id="Box">
     <%= f.label 'Upload Your Song !', class:'label1', for:'fileUpload' %>
     <%= f.label 'Size: 15mb max', class:'label2', for:'fileUpload' %>
     <%= f.file_field :video, id:'fileUpload', style:'opacity:0;position:absolute;' %>
     <%= f.label 'Choose your file', for:'fileUpload', class:'btn-hover color-1 flex' %>
 </div>

脚本 Javascript：

<script>
    var Browse = document.getElementById("fileUpload")
    var File = document.getElementById("Box");
    var Upload = document.getElementById("Uploader");
    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);
    }
</script>

CSS：

.fade-in {
    opacity: 0;
    transition:             opacity 1s;
        -moz-transition:    opacity 1s;
        -ms-transition:     opacity 1s;
        -o-transition:      opacity 1s;
        -webkit-transition: opacity 1s;
}

标签： javascriptruby-on-railsanimation

解决方案

我怀疑当输入改变时你会想要运行这个。也许使用onChange事件：

var browseInput = document.getElementById("fileUpload")
browseInput.onchange = function() {
  var fileBox = document.getElementById("Box");
  if( browseInput.files.length != 0 ){
      fileBox.animate([
        { transform: 'translateY(0px)' },
        { transform: 'translateY(-150px)' }
      ], {
        duration: 1000,
      });
    window.setTimeout( function() {
      fileBox.className += ' fade-in';
    }, 50);
    window.setTimeout( function() {
      fileBox.style.display = 'none';
    }, 1050);
  }
}

推荐阅读