Переход от анимации к другой анимации

Я не знаю, как описать его, так что смотреть на этот пример:Переход от анимации к другой анимации

$('button').on('click',() => { 
 
       $('.spinner').addClass('paused'); 
 
});

.spinner { 
 
} 
 

 
.spinner > div { 
 
    width: 25px; 
 
    height: 25px; 
 
    background-color: #9f9f9f; 
 

 
    border-radius: 100%; 
 
    display: inline-block; 
 
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; 
 
    animation: sk-bouncedelay 1.4s infinite ease-in-out both; 
 
} 
 

 
.spinner.paused > div { 
 
    -webkit-animation: sk-pause 1.4s 1 ease-in-out both; 
 
    animation: sk-pause 1.4s 1 ease-in-out both; 
 
    // -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */ 
 
    // animation-play-state: paused; 
 
} 
 
.spinner .bounce1 { 
 
    -webkit-animation-delay: -0.32s; 
 
    animation-delay: -0.32s; 
 
} 
 

 
.spinner .bounce2 { 
 
    -webkit-animation-delay: -0.16s; 
 
    animation-delay: -0.16s; 
 
} 
 

 
@-webkit-keyframes sk-bouncedelay { 
 
    0%, 80%, 100% { -webkit-transform: scale(0.3) } 
 
    40% { -webkit-transform: scale(1.0) } 
 
} 
 
@keyframes sk-pause { 
 
    80%, 100% {transform: scale(0.3)} 
 
} 
 
@keyframes sk-bouncedelay { 
 
    0%, 80%, 100% { 
 
    -webkit-transform: scale(0.3); 
 
    transform: scale(0.3); 
 
    } 40% { 
 
    -webkit-transform: scale(1.0); 
 
    transform: scale(1.0); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="spinner"> 
 
       <div class="bounce1"></div> 
 
       <div class="bounce2"></div> 
 
       <div class="bounce3"></div> 
 
</div> 
 

 
<button> Click </button>

У вас есть три шара, которые подпрыгивая. Когда вы нажимаете кнопку, он добавляет класс, приостановленный, который оживляет самый маленький видимый мяч. Но когда вы нажимаете, все они исчисляются от 1,0 до 0,3. Я бы хотел, чтобы они переходили из своего предыдущего состояния в 0,3.

источник

2017-02-04 Vinz243

Пожалуйста, смотрите это:

<head> 
 
    <title></title> 
 
    <style> 
 
     .spinner { 
 
     } 
 

 
      .spinner > div { 
 
       width: 25px; 
 
       height: 25px; 
 
       background-color: #9f9f9f; 
 
       border-radius: 100%; 
 
       display: inline-block; 
 
       -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; 
 
       animation: sk-bouncedelay 1.4s infinite ease-in-out both; 
 
      } 
 

 
      .spinner.paused > div { 
 
       -webkit-animation: sk-pause 1.4s 1 ease-in-out both; 
 
       animation: sk-pause 1.4s 1 ease-in-out both; 
 
      } 
 

 
      .spinner .bounce1 { 
 
       -webkit-animation-delay: -0.32s; 
 
       animation-delay: -0.32s; 
 
      } 
 

 
      .spinner .bounce2 { 
 
       -webkit-animation-delay: -0.16s; 
 
       animation-delay: -0.16s; 
 
      } 
 

 
     @-webkit-keyframes sk-bouncedelay { 
 
      0%, 80%, 100% { 
 
       -webkit-transform: scale(0.3); 
 
      } 
 

 
      40% { 
 
       -webkit-transform: scale(1.0); 
 
      } 
 
     } 
 

 
     @keyframes sk-pause { 
 
      80%, 100% { 
 
       transform: scale(0.3); 
 
      } 
 
     } 
 

 
     @keyframes sk-bouncedelay { 
 
      0%, 80%, 100% { 
 
       -webkit-transform: scale(0.3); 
 
       transform: scale(0.3); 
 
      } 
 

 
      40% { 
 
       -webkit-transform: scale(1.0); 
 
       transform: scale(1.0); 
 
      } 
 
     } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 

 
    <div class="spinner"> 
 
     <div id="div1" class="bounce1"></div> 
 
     <div id="div2" class="bounce2"></div> 
 
     <div id="div3" class="bounce3"></div> 
 
    </div> 
 

 
    <input type="button" id="a" value="Pause" /> 
 
    <script> 
 
     $('#a').click(function() 
 
     { 
 
      var computedStyle1 = window.getComputedStyle(document.getElementById("div1")); 
 
      var computedStyle1 = window.getComputedStyle(document.getElementById("div1")); 
 
     var computedStyle2 = window.getComputedStyle(document.getElementById("div2")); 
 
     var computedStyle3 = window.getComputedStyle(document.getElementById("div3")); 
 
     $('#div1').css('transform', computedStyle1.transform).css('-webkit-transform', computedStyle1.transform); 
 
     $('#div2').css('transform', computedStyle2.transform).css('-webkit-transform', computedStyle2.transform); 
 
     $('#div3').css('transform', computedStyle3.transform).css('-webkit-transform', computedStyle3.transform); 
 
      $('.spinner').addClass('paused'); 
 
     }); 
 
    </script> 
 
</body>

Я не знаю, что это Реагировать, но я думаю, что код должен быть какой-то думать, как это (вместо $('#a').click(function().... блочный код):

$('#a').on('click',() => { 
      var computedStyle1 = window.getComputedStyle(document.getElementById("div1")); 
      var computedStyle2 = window.getComputedStyle(document.getElementById("div2")); 
      var computedStyle3 = window.getComputedStyle(document.getElementById("div3")); 
      $('#div1').css('transform', computedStyle1.transform).css('-webkit-transform', computedStyle1.transform); 
      $('#div2').css('transform', computedStyle2.transform).css('-webkit-transform', computedStyle2.transform); 
      $('#div3').css('transform', computedStyle3.transform).css('-webkit-transform', computedStyle3.transform); 
      $('.spinner').addClass('paused'); 
     });

источник

2017-02-04 23:35:37

Я не понимаю разницы. Также использование расширенного jquery не произойдет, я использую реакцию – Vinz243

Вы говорите, что это не имеет разницы? Не могли бы вы перезагрузить это? –

Извините, мой плохой. Во всяком случае, как я могу это сделать с помощью React? – Vinz243

Переход от анимации к другой анимации

ответ

Смежные вопросы