Взаимодействие css анимация - javascript? - PullRequest
Новая
       47

Взаимодействие css анимация - javascript?

0 голосов
/ 28 апреля 2020

Я использую библиотеку javascript (https://www.jspsych.org/) для проведения психологических экспериментов в Интернете. Перед началом эксперимента алгоритм должен создать эксперимент, который может занять до 30 сек c в зависимости от сложности эксперимента. Поэтому я хотел добавить анимацию загрузки, чтобы наши участники ждали, пока эксперимент не будет готов. Я скопировал загрузочную анимацию из https://redstapler.co/add-loading-animation-to-website/. Мой код выглядит следующим образом: 

<head>
<link rel="stylesheet" type="text/css" href="/sw/jspsych/css/loader.css" />
  </head>
  <body id="experimentSurface">

        <div id="loader-wrapper" class="loader-wrapper">
            <span class="loader"><span class="loader-inner"></span></span>
          </div>

  </body>
  <script>
//alert("start")
function switchLoader() {document.getElementById("loader-wrapper").style.display = "none"}
theExperimentCreatorAlgorithmThatTakesSomeTime()

switchLoader()
jsPsych.init() //here the experiment starts

К сожалению, анимация отображается только в том случае, если я поместил что-то liker alert () или prompt () в начало кода javascript, и даже тогда он зависнет, как только окно предупреждения / подсказки закрыто. Является ли это взаимодействием между анимацией CSS и медленным кодом javascript (думаю, в противном случае это как-то связано с библиотекой jsPsych)?

...