анимация не работает ни в одном браузере

apolon1

Привет, Я работаю над приложением, написанным на dHTML (HTML, CSS, JavaScript и Perl/CGI), работающим под управлением Apache и mod_perl на базовом ПК с Windows 10. ОС и все браузеры обновлены. У меня есть анимация загрузки CSS-файла.

Он работает, как и ожидалось, в файле .HTML во всех браузерах, в которых я тестирую (Chrome, Edge, FF, IE и Opera). Он вообще не будет работать в файле Perl/CGI.

Он размещается и выглядит правильно, но не анимируется.

Я разделил модуль CGI до скелета HTML, CSS и DIV, в которых отображается анимация, но анимации по-прежнему нет.

HTML-код приведен ниже.

 <!DOCTYPE html>


<HTML lang='en'>


<HEAD>


<STYLE>


.progress {


width: 500px;


height: 30px;


border-radius: 15px;


overflow: hidden;


background: #eee;


position: relative;


}


.progress>.progress-value {


position: relative;


height: 100%;


left: 0;


top: 0;


}


.progress>.progress-value::before {


content: '';


position: absolute;


left: 0;


top: 0;


width: 100%;


height: 100%;


animation: progress-value 3s ease-in-out forwards;


-webkit-animation: progress-value 3s ease-in-out forwards;


background: #666;


}


.progress>.progress-value.red::before {


background: #f44;


}


.progress>.progress-value.green::before {


background: #3f4;


}


.progress>.progress-value.blue::before {


background: #54f;


}


@keyframes progress-value {


from {


width: 0%;


}


to {


width: 100%;


}


}


@-webkit-keyframes progress-value {


from {


width: 0%;


}


to {


width: 100%;


}


}


</STYLE>


</HEAD>


<BODY STYLE='TEXT-ALIGN:center;'>


<div class="progress">


<div class="progress-value" style="width: 65%"></div>


</div>


<div style="height: 15px"></div>


<div class="progress">


<div class="progress-value red" style="width: 95%"></div>


</div>


<div style="height: 15px"></div>


<div class="progress">


<div class="progress-value green" style="width: 41%"></div>


</div>


<div style="height: 15px"></div>


<div class="progress">


<div class="progress-value blue" style="width: 14%"></div>


</div>


</BODY>


</HTML>

Код (разметка): Есть ли что-нибудь в Apache или mod_perl, что могло бы помешать анимации.

Я делаю это как клиент на своем сервере.

Или что-нибудь еще приходит на ум по этому поводу.

Любая помощь приветствуется. Крейгту

Наталья Полетаева

На форуме используется довольно стандартный bbcode — используйте его, чтобы сделать свой код красивым. Я начал с вашего кода вверху, и он все еще работал.

Моя анимация работала, когда она была создана, но не после этого, просто нужно было настроить JavaScript. Можете ли вы прислать мне ссылку на страницу на вашем сервере?

Qyaier

Эта анимация представляет собой небольшое дополнение к двум модулям в конфигурации приложения, состоящей примерно из 165 модулей.

Я только что закончил раунд усовершенствований и повторного тестирования, и Perl работает хорошо.

Модуль Perl/CGI, который я урезал, чтобы исключить возможность взаимодействия с любым кодом модуля, работает как задумано, за исключением добавленной анимации.

romka1608

Я раньше не использовал Perl для вывода HTML, но первое, что вам нужно проверить, это работает ли базовый «привет, мир» в Perl, возможно, ваш веб-хост просто не имеет возможностей Perl.

SpT

Я думаю, нам нужно вернуться к основам.

Perl и CGI — отвлекающий маневр.

Вы просто хотите, чтобы на вашей странице появился индикатор выполнения, верно?

все, что вам нужно сделать, это иметь таблицу стилей в вашем CSS и поместить div с прогрессом на страницу.

Я не знаю, как вы рассчитываете прогресс и добавляете к нему дополнения, но вот мое мнение о вашем коде.

 


<!DOCTYPE html>


<HTML lang='en'>


<HEAD>


<STYLE>


.progress {


width: 500px;


height: 30px;


border-radius: 15px;


overflow: hidden;


background: #eee;


position: relative;


}


.progress>.progress-value {


position: relative;


height: 100%;


left: 0;


top: 0;


}


.progress>.progress-value::before {


content: '';


position: absolute;


left: 0;


top: 0;


width: 100%;


height: 100%;


animation: progress-value 3s ease-in-out forwards;


-webkit-animation: progress-value 3s ease-in-out forwards;


background: #666;


}


.progress>.progress-value.red::before {


background: #f44;


}


.progress>.progress-value.green::before {


background: #3f4;


}


.progress>.progress-value.blue::before {


background: #54f;


}


@keyframes progress-value {


from {


width: 0%;


}


to {


width: 100%;


}


}


@-webkit-keyframes progress-value {


from {


width: 0%;


}


to {


width: 100%;


}


}


</STYLE>


<script>


function addProgress(){


var holder = document.getElementById("holder");


var increase = Math.round(Math.random() * 10);


if (holder.getElementsByTagName('div').length > 0) {


var width = parseInt(holder.getElementsByTagName('div')[0].style.width);


holder.getElementsByTagName('div')[0].style.width = "" + (width + increase) + "%";


}


else {


holder.classList.add("progress");


var div = document.createElement("div");


div.className = "progress-value red";


div.style.width = "" + increase + "%";


holder.appendChild(div);


}


}


</script>


</HEAD>


<BODY STYLE='TEXT-ALIGN:center;'>


<div class="progress">


<div class="progress-value" style="width: 65%"></div>


</div>


<div style="height: 15px"></div>


<div class="progress">


<div class="progress-value red" style="width: 95%"></div>


</div>


<div style="height: 15px"></div>


<div class="progress">


<div class="progress-value green" style="width: 41%"></div>


</div>


<div style="height: 15px"></div>


<div class="progress">


<div class="progress-value blue" style="width: 14%"></div>


</div>


<hr>


<h2>Sarah's stuff</h2>


<button onclick="addProgress()">Add to the Progress Bar</button>


<div id='holder'>


</div>


</BODY>


</HTML>

Код (разметка):

dev69

Насколько вы контролируете методы, используемые на сайте?

Есть гораздо лучшие способы создания модальных всплывающих окон.

И в этом случае вам нужен только индикатор выполнения, потому что ваше изображение не оптимизировано, и нет абсолютно никаких причин, по которым его нельзя было бы предварительно загрузить, и крошечный файл.

По сути, вы тратите уйму времени, пытаясь решить не ту проблему.

my_revenge

Привет, Сарак, Я поместил ваш код в html-скелет и вынул все свои вещи.

Итак, все, что было в модуле CGI, — это вызов Perl, пара операторов use, новый оператор cgi, ваш CSS, JavaScript, заголовок h2, кнопка и элемент div.

Мне пришлось нажать кнопку один раз, чтобы индикатор появился, и нажимать ее снова и снова, чтобы индикатор начал двигаться. Пожалуйста, скопируйте код вверху этого поста в файл .html и запустите его, чтобы увидеть, как должен работать индикатор. Спасибо за попытку помочь мне в этом.

Кроме того, у меня возникли проблемы с поиском правил форума и тегов, которые следует использовать в сообщении. Крейгт

Denwer1

Я загрузил модуль HTML только с индикатором загрузки файла в iframe в модуле CGI, и анимация заработала. Но загрузка анимации в элемент div, расположенный поверх iframe или в любом другом месте CGI, и анимация не работает.

Похожие темы	Дата
[HTML Academy] Базовый HTML и CSS №13 (2016)	19.10.2024, 18:10
Алексей Кудрев] Создание мобильной игры	19.10.2024, 18:10
Правильный деплой приложений на PHP 2.0	19.10.2024, 18:10
Dynamicskinform	19.10.2024, 18:10
Datasnap rest special characters	19.10.2024, 18:10
Tabs Studio (for Visual Studio) - All Here	19.10.2024, 18:10
Delphi Android 64-bit In-App-Purchase Fix by Marco Cantu	19.10.2024, 18:10
Serializing Generic Object Lists with TJson by Uwe Raabe	19.10.2024, 18:10
Name your threads, even the ones auto-created by Delphi by Darian Miller	19.10.2024, 18:10
How to export a report to Excel XML from Delphi / Lazarus	19.10.2024, 18:10

анимация не работает ни в одном браузере

apolon1

Наталья Полетаева

Qyaier

romka1608

SpT

dev69

my_revenge

Denwer1

I AM

Интересно