如何使用与按钮单击和HTML5视频结束相关联的jQuery重置转换事件？

Question

我有非常具体的动画，无法再现所需的动画。

我需要在单击按钮时模拟变换旋转动画，然后在html5视频结束后立即将其重置，以便可以向后旋转。

<script>
$(document).ready(function() {
  $('.card').css('background', '#646f80');
  $('.cardFront').css('opacity', '1');

  function reset() {
    $('.card').addClass('notransition');
    $('.cardBack').addClass('notransition');
    $('.cardFront').addClass('notransition');
  }

  $('#btn').click(function() {
    $('.cardFront').css('transition', 'visibility 2s, opacity 2s linear');
    $('.cardFront').css('opacity', '0');
    $('.cardFront').css('display', 'none');
    $('.card').css('transform', 'rotateY(180deg)');
    $('.card').css('background', '#fff');
    $('.cardBack').css('display', 'block');
    setTimeout(function() {
      $('.cardBack').css('opacity', '1');
      $('.cardBack').css('transform', 'rotateY(180deg)');
      $('.cardBack').css('transition', 'visibility 0.5s, opacity 0.5s linear');
    }, 350);
    $('.card').css('transform','none');
     $('.cardBack').css('transform','none');
     $('.cardFront').css('transform','none');
  });

  document.querySelector('#backvideo').addEventListener('ended',function(){
    $('.card').addClass('notransition');
    $('.cardBack').addClass('notransition');
    $('.cardFront').addClass('notransition');
    var video = document.getElementById('backvideo');
    video.pause();
    video.currentTime = 0;
    video.load();
    $('.cardBack').css('transition', 'visibility 2s, opacity 2s linear');
    $('.cardBack').css('transform', 'rotateY(180deg)');
    $('.cardBack').css('opacity', '0');
    $('.cardBack').css('display', 'none');
    $('.card').css('transform', 'rotateY(180deg)');
    $('.cardFront').css('transform', 'rotateY(180deg)');
    $('.card').css('background', '#646f80');
    $('.cardFront').css('display', 'block');
    setTimeout(function() {
      $('.cardFront').css('opacity', '1');
      $('.cardFront').css('transform', 'rotateY(180deg)');
      $('.cardFront').css('transition', 'visibility 0.5s, opacity 0.5s linear');
    }, 350);
    reset();
  }, false);

  var lastScrollTop = 0;

  $(window).scroll(function(event){
     var st = $(this).scrollTop();
     if (st > lastScrollTop) {
    //
     } else {
       var video = document.getElementById('backvideo');
       video.pause();
       video.currentTime = 0;
       video.load();
       $('.cardBack').css('transition', 'visibility 0.5s, opacity 0.5s linear');
       $('.cardBack').css('opacity', '0');
       $('.cardBack').css('display', 'none');
       $('.card').css('transform', 'rotateY(180deg)');
       $('.card').css('background', '#646f80');
       $('.cardFront').css('display', 'block');

       $('.cardFront').css('opacity', '1');
       $('.cardFront').css('transform', 'rotateY(180deg)');
       $('.cardFront').css('transition', 'visibility 0.5s, opacity 0.5s linear');
     }
     lastScrollTop = st;
     $('.card').css('transform','none');
     $('.cardBack').css('transform','none');
     $('.cardFront').css('transform','none');
  });

});

我想要的很简单：

单击按钮会翻转.cart框，并更改我的视频和.cart容器的背景。 视频结束后，我想再次切换到第一个视频版本。

这是一些获得更相关参考的html：

              <div class="card">
                <div class="cardFront"><video id="frontvideo" src="img/gifs/seq_dark.mp4" preload="auto" autoplay="" loop="" muted="" playsinline=""></video></div>
                <div class="cardBack"><video id="backvideo" src="img/gifs/seq_light.mp4" preload="auto" autoplay="" muted="" playsinline=""></video></div>
              </div>

我希望有人可以帮助我！

提前致谢！

Answer 1

我已经解决了从内联CSS转换为类的问题。 这样可以避免使用！important功能，并且可以根据需要完美地重置所有类。 如果有人需要类似的解决方案，这是固定代码。 您可以在上面的问题中看到的CSS。

<script>
 $(document).ready(function() {
  $('.card').addClass('greybg');
  $('.cardFront').addClass('visible');

  $('.btn_amz').click(function() {
    $('.btn_amz').addClass('stop');
    $('.card').removeClass('greybg');
    $('.cardFront').removeClass('visible');
    $('.cardFront').removeClass('showfront');
    $('.cardFront').addClass('hidefront');
    $('.cardFront').addClass('flipcard');
    $('.card').addClass('flipcard');
    $('.card').removeClass('rotatetoblack');
    $('.card').addClass('rotatetowhite');
    setTimeout(function() {
      $('.cardBack').removeClass('hideback');
      $('.cardBack').addClass('showback');
    }, 350);

  });

  document.querySelector('#backvideo').addEventListener('ended',function(){

    var video = document.getElementById('backvideo');
    video.pause();
    video.currentTime = 0;
    video.load();
    $('.btn_amz').removeClass('stop');
    $('.cardBack').addClass('flipcard');
    $('.card').addClass('flipcard');
    $('.cardBack').removeClass('showback');
    $('.cardBack').addClass('hideback');
    $('.card').removeClass('rotatetowhite');
    $('.card').addClass('rotatetoblack');
    setTimeout(function() {
      $('.cardFront').removeClass('hidefront');
      $('.cardFront').addClass('showfront');
    }, 350);
    $('.cardBack').removeClass('flipcard');
    $('.card').removeClass('flipcard');
  }, false);

  var lastScrollTop = 0;

  $(window).scroll(function(event){
     var st = $(this).scrollTop();
     if (st > lastScrollTop) {
    //
     } else {
       var video = document.getElementById('backvideo');
       video.pause();
       video.currentTime = 0;
       video.load();
       $('.btn_amz').removeClass('stop');
       $('.cardBack').addClass('flipcard');
       $('.card').addClass('flipcard');
       $('.cardBack').removeClass('showback');
       $('.cardBack').addClass('hideback');
       $('.card').removeClass('rotatetowhite');
       $('.card').addClass('rotatetoblack');
       setTimeout(function() {
         $('.cardFront').removeClass('hidefront');
         $('.cardFront').addClass('showfront');
       }, 350);
       $('.cardBack').removeClass('flipcard');
       $('.card').removeClass('flipcard');
     }
     lastScrollTop = st;
  });