Отменить анимацию кнопки усилителя-карусели - PullRequest
Новая
       59

Отменить анимацию кнопки усилителя-карусели

0 голосов
/ 28 октября 2019

В ампер-карусели типа «слайды» предыдущая и следующая стрелки появятся, только когда слайд полностью задействован.

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

Я бы хотел управлять анимацией.

Вот исходный код CSS, который, как мне кажется, контролирует эту анимацию /переход: 

.i-amphtml-carousel-button-start-hint .amp-carousel-button:not(.amp-disabled){
    animation:i-amphtml-carousel-hint 1s ease-in 3s 1 normal both
}
.amp-mode-mouse .i-amphtml-carousel-button-start-hint .amp-carousel-button:not(.amp-disabled){
    animation:none
}
@keyframes i-amphtml-carousel-hint{
    0%{
        opacity:1;
        visibility:visible
    }
    to{
        opacity:0;
        visibility:hidden
    }
}
amp-carousel .amp-carousel-button.amp-disabled{
    animation:none;
    opacity:0;
    visibility:hidden
}

.i-amphtml-carousel-start-marker,
.i-amphtml-carousel-end-marker {
  background-color: transparent !important;
  display: block !important;
  flex: 0 0 1px !important;
  height: 100% !important;
  position: relative !important;
  scroll-snap-align: start !important;
  width: 1px !important;
}

.i-amphtml-carousel-start-marker {
  order: -1 !important;
  margin-left: -1px !important;
}

.i-amphtml-carousel-end-marker {
  order: 100000000 !important;
  margin-right: -1px !important;
}

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

amp-carousel-button:not(.amp-disabled){
    animation: amp-carousel-button-animation 1s ease 3s 1 normal both;
  }

@keyframes amp-carousel-button-animation {
      0%{
          opacity:1;
          visibility:visible
      }
      50%{
        opacity:1;
        visibility:visible
      }
      100%{
          opacity:0;
          visibility:hidden
      }
  }
...