CSS справа налево @keyframes преобразование: -100% для преобразования нет - PullRequest
Новая
       39

CSS справа налево @keyframes преобразование: -100% для преобразования нет

0 голосов
/ 05 июля 2019

Я столкнулся с трудностями при поиске причины проблемы. И я ценю вашу помощь. На веб-сайте я установил направление текста html справа налево, потому что веб-сайт на арабском языке. И есть анимация CSS, которая работает нормально. За исключением следующих условий: Когда направление текста HTML справа налево, и я просматриваю веб-сайт на мобильном телефоне. Или с помощью параметра переключения устройства в Google Chrome. Когда страница загружается, она загружается в элемент div, для которого установлено значение -100% влево, вместо загрузки содержимого, а элемент div, равный -100%, попадает в середину страницы. И это создает иллюзию, что вся веб-страница идет справа. Я не знаю, как решить эту проблему для мобильных устройств, я думаю о окнах просмотра, но я не смог найти решение. Вот код для веб-страницы 

<!DOCTYPE html>
<html dir="rtl" lang="ar" >
<head>
<meta charset="UTF-8">
<title>RTL TEST SITE</title>
<style type="text/css">
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: none;
  }
}
</style>
</head>
<body class="rtl" >

    <div style="background:green;text-align:center;">
        <a>عنوان الصفحة</a>
    </div>

    <div class="fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
        <h2>كلمات باللغة العربية تأتي من جهة اليسار</h2>
    </div>

    <p>فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة </p>

    <div class="fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">
        <h2>كلمات باللغة العربية تأتي من جهة اليمين</h2>
    </div>
</body>
</html>

Вот ссылка на веб-страницу http://lotav.com/right2left.html Пожалуйста, попробуйте на мобильном устройстве или используйте Google Chrome с настройкой переключения устройства на мобильное устройство, и он будет плохо себя вести. И сравните это с запуском сайта в браузере ПК, который будет работать нормально.

И две картинки, чтобы объяснить, что я имею в виду. Первый, когда он нормально загружается на ПК, и второй, когда он загружается ненормально на мобильном телефоне. When it loads normal on PC и When it loads abnormally on the mobile

1 Ответ

0 голосов
/ 05 июля 2019

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

.fade-in-left {
    animation: fadeInLeft ease 1s;
  -webkit-animation: fadeInLeft ease 1s;
  -moz-animation: fadeInLeft ease 1s;
  -o-animation: fadeInLeft ease 1s;
  -ms-animation: fadeInLeft ease 1s;
}

https://jsfiddle.net/HiramRamirez/6qy9e52d/

Надеюсь, это может помочь вам.

...