Скрыть amp-пользовательское уведомление при начальной загрузке страницы - PullRequest
Новая
       9

Скрыть amp-пользовательское уведомление при начальной загрузке страницы

0 голосов
/ 12 декабря 2018

Я использую уведомление пользователя-amp для отображения формы подписки на новостную рассылку (через amp-iframe) на рабочем столе и уменьшенной версии текста / cta на мобильном телефоне.

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

Вы можете увидеть проблему на нашем промежуточном сайте, здесь: https://winefolly.staging.wpengine.com/

Вот копия с моим полным кодом: https://www.pastiebin.com/5c10ffee0703c

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

Есть идеи?

1 Ответ

0 голосов
/ 12 декабря 2018

Мне удалось выяснить проблему.У меня не было ключевых кадров прозрачности и видимости в медиа-запросе (дух!).

Обновлен код анимации: 

<amp-animation id="showSignup" layout="nodisplay">
<script type="application/json">
{
   "duration": "200ms",
    "fill": "both",
    "iterations": "1",
    "easing": "ease-out",
    "delay": "200ms",
    "direction": "alternate",
    "selector": "#newsletter-slidein",
    "switch": [
      {
        "media": "(min-width: 480px)",
        "keyframes": { "opacity": "1", "visibility": "visible", "transform": "translateX(-365px)" }
      },
      {
        "keyframes": { "opacity": "1", "visibility": "visible" }
      }
    ]
 }
</script>
</amp-animation>
<amp-animation id="hideSignup" layout="nodisplay">
<script type="application/json">
 {
    "duration": "200ms",
    "fill": "both",
    "iterations": "1",
    "direction": "alternate",
    "easing": "ease-in",
    "delay": "0",
    "selector": "#newsletter-slidein",
    "switch": [
      {
        "media": "(min-width: 480px)",
        "keyframes": { "opacity": "0", "visibility": "hidden", "transform": "translateX(-15px)" }
      },
      {
        "keyframes": { "opacity": "0", "visibility": "hidden" }
      }
    ]
 }
</script>
</amp-animation>
...