CSS заставляет карту исчезать и затем исчезать при загрузке страницы - PullRequest
Новая
       1

CSS заставляет карту исчезать и затем исчезать при загрузке страницы

3 голосов
/ 12 января 2020

Я пытаюсь заставить эту карту постепенно исчезать и затем исчезать, как только страница загружается: 

<style>
.container {

    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
</style>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!
                </div>
            </div>
        </div>
    </div>
</div>

Карта выглядит просто отлично, но не имеет никакой анимации.

Я также пробовал это: 

<style>
.container{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}
</style>

<div onload="document.getElementById(test).style.opacity='1'">
    <div class="container" id="test">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Dashboard</div>

                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

                        You are logged in!
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

1 Ответ

1 голос
/ 12 января 2020

Я запустил первый фрагмент в jsfiddle. net и красная карточка, кажется, исчезает, а затем исчезает, как вы хотели.

https://jsfiddle.net/q2cymof9/

<style>
  .container {

    width: 200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
  }

  @-webkit-keyframes fadeinout {

    0%,
    100% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes fadeinout {

    0%,
    100% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

</style>

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">Dashboard</div>

        <div class="card-body">
          @if (session('status'))
          <div class="alert alert-success" role="alert">
            {{ session('status') }}
          </div>
          @endif

          You are logged in!
        </div>
      </div>
    </div>
  </div>
</div>

Какой браузер вы используете? Вы можете проверить, будет ли он работать для вашего веб-браузера, перейдя по этой ссылке https://caniuse.com/#search = анимация

Вот jquery, чтобы сделать его более удобным для браузера! 

<style>
  .container {

    width: 200px;
    height: 200px;
    background: red;
  }

</style>

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">Dashboard</div>

        <div class="card-body">
          @if (session('status'))
          <div class="alert alert-success" role="alert">
            {{ session('status') }}
          </div>
          @endif

          You are logged in!
        </div>
      </div>
    </div>
  </div>
</div>

$('.container').hide();
$(document).ready(function() {
  $('.container').delay(1000).fadeIn();
  $('.container').delay(5000).fadeOut();
});
...