css анимация переворачивания карты, а затем содержимое мерцает, чтобы увидеть - PullRequest
Новая
       3

css анимация переворачивания карты, а затем содержимое мерцает, чтобы увидеть

0 голосов
/ 09 марта 2020

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

Вот моя структура CSS и HTML. 

.flip__card {
  margin-bottom: $multiple;
  transform: translate3d(0, 0, 0);
  perspective: 1000px;
  min-height: 256px;
  @include breakpoint(tablet-l) {
    margin-bottom: $lg-multiple;
  }
  img {
    max-width: 100%;
    height: auto;
    margin-bottom: $multiple / 2;
    display: block;
    @include breakpoint(tablet-l) {
      margin-bottom: $lg-multiple / 2;
    }
  }
}

.flip__card--inner {
  position: relative;
  width: 100%;
  min-height: 256px;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip__card__label {
  min-height: $multiple * 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  @include breakpoint(tablet-l) {
    min-height: $lg-multiple * 2;
  }
}

.flip__card__front,
.flip__card__back {
  padding: $multiple / 2;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-right: 1px solid $light-grey;
  border-bottom: 1px solid $light-grey;
}

.flip__card__front {
  text-align: center;
  background-color: $white;
}

.flip__card__back {
  transform: rotateY(180deg);
  background-color: $light-grey;
  border-color: $grey;
  .member__bio {
    overflow: hidden;
    position: relative;
    height: $multiple * 9;
    p {
      margin-bottom: 0;
    }
    @include breakpoint(tablet-l) {
      height: $lg-multiple * 9;
      p {
        margin-bottom: 0;
      }
    }
  }
}

.flip__card:hover .flip__card--inner {
  transform: rotateY(180deg);
}
<div class="flip__card">
  <div class="flip__card--inner">
    <div class="flip__card__front">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="{{member.photo.one().getUrl('teamPhoto')}}" alt="{{member.title}}" class="blackAndWhite" />
      <div class="flip__card__label">
        <h4 class="alt noMargin"><span class="script">{{member.title}}</span></h4>
      </div>
    </div>
    <div class="flip__card__back">
      <div class="member__bio">
        {{member.bio|widont}} {% if member.linkAuthor is defined and member.linkAuthor|length %} {% include '_partials/common/button' with { 'label':'Title', 'weight':'secondary', 'url':'url' }%} {% endif %}
      </div>
      <!-- bio -->
    </div>
  </div>
</div>

Здесь вы можете увидеть, что это создает,

Codepen

1 Ответ

0 голосов
/ 13 марта 2020

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

попробуйте!

...