html: Могу ли я остановить GIF? (Ищете способы, которые могут достигнуть sh того же эффекта, что и «остановить» gif) - PullRequest
Новая
       8

html: Могу ли я остановить GIF? (Ищете способы, которые могут достигнуть sh того же эффекта, что и «остановить» gif)

0 голосов
/ 20 апреля 2020

Я работаю над кодом, который является интерактивной дверью. Он открывается и закрывается на основе щелчка мышью. Я пытаюсь понять, как заставить гифку на двери вращаться неподвижно, когда она закрыта - (думаю, мне следует сделать еще одно неподвижное изображение гифки, и когда мышь нажимает на дверь четное число раз, гифка превращается в неподвижное изображение? Это всего лишь мое предположение, я действительно не очень разбираюсь в кодировании) Мой код выглядит следующим образом:

html: 

<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
    <!-- <script src="js/sketch.js"></script> -->
    <script src="https://s.codepen.io/assets/libs/prefixfree.min.js"></script>
    <script src="./js/openDoor.js"></script>
    <script src="https://s.codepen.io/assets/libs/prefixfree.min.js"></script>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
        <div class="perspective" onclick="openDoor(this)">
            <div class="thumb">
            </div>
        </div>       
  <!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Door</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<body>
</html>

js: 

function openDoor(field) {
    var y = $(field).find(".thumb");
    var x = y.attr("class");
    if (y.hasClass("thumbOpened")) {
        y.removeClass("thumbOpened");
    }
    else {
        $(".thumb").removeClass("thumbOpened");
        y.addClass("thumbOpened");
    }
}

css: 

body
{
  background-color:#f0f0f0;
}

.container
{
            margin:0 auto;
            width:90%;
}
.perspective
{
   background: url("http://dc428.4shared.com/img/QWu4ziBq/s3/doorBorder.png");
            background-repeat: no-repeat;
            background-position: center center;
            position: relative;
            display: inline;
            float: left;
            height: 274px;
            width: 147px;
            margin: 40px;
            margin-left: 400px;
            -webkit-perspective: 450;
            border-radius: 3px;
            box-sizing: border-box;
        }

        .thumb
        {
            background: url("https://media.giphy.com/media/l41m4IRJqzgtFQ4O4/giphy.gif");
            background-repeat: no-repeat;
            background-position: center center;

            width: 147px;
            height: 274px;
            position: relative;
            box-sizing: border-box;
            border-radius: 3px;
            box-shadow: 0 0 0 10px rgba(255, 255, 255, .0) inset;
            transition: 1s transform linear;
            transform-origin: left;
            cursor: pointer;
        }

        .thumbOpened
        {
            transform: rotateY(-90deg);
            transform-origin: 8px;
            transition: .5s linear;
        }

.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
  color: #000;

    transform-origin: left;
  transform:rotateY(180deg);
  opacity:0;
  animation-name: go;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  width:350px;
}
@keyframes go {
  100%{
    opacity:1;
    transform:rotateY(0deg);
  }
}

Можно ли остановить анимацию GIF? Я ценю любую помощь!

...