transition test2

keyframes 交換相對位置

by wllai2001

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<div class="wrap">

  <div class="btn">點我</div>
  
  <div class="d1 item">
    M0001
  </div>
  
  <div class="arrow">
    <i class="fas fa-arrow-right"></i>
  </div>
  
  <div class="d2 item">
    K9999
  </div>
</div>

CSS

div.wrap{
  width: 350px;
  height: 350px;
  border: 3px solid #ccc;
  margin:auto;
  position: relative;
  
}



div.btn {
  margin:auto;
  width:100px;
  border: 4px solid #e37836;
  border-radius:5px;
  text-align:center;
  cursor: pointer;
  background:#e3783677;
}  

div.arrow { 
  width:30px;
  text-align:center;
  color:#e37836;
  font-size:30px;
  top:160px;
  left:160px;
  position: absolute;
  
}


div.item {
  width: 100px;
  height: 100px;
  border: 4px solid #e37836;
  align-items: center;
  position: absolute;
  text-align:center;
  line-height:100px;  
  border-radius:15px;
}

/*影格1-起始位置*/
.d1 {
  top:121px;
  left:46px;
}

.d2 {
 bottom:121px;
 right:46px;
}

:root {
  --sec1: 2s;
  --background-color: Teal;
}

.wrap, .d1, .d2, .arrow{
  animation-duration: var(--sec1);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.arr1{
   animation-name: an-arr1;
}
.arr1-r{  
   animation-name: an-arr1-r;
}

.w1{
  animation-name: an-w1;
}

.s1 {
  animation-name: an-d1; 
}

.s2 {
  animation-name: an-d2; 
}

.w1-r{
  animation-name: an-w1-r; 
}

.s1-r {
  animation-name: an-d1-r;   
}

.s2-r {
  animation-name: an-d2-r; 
}

@keyframes an-w1 {
  0% {
    /* 第一個幀的樣式 */
    width: 350px;
    height: 350px;
  }  
  50% {
    /* 第一個幀的樣式 */
    width: 350px;
    height: 350px;
  }
  100% {
    /* 最後一個幀的樣式 */
    width: 200px;
    height: 350px;
  }
} 

@keyframes an-w1-r {
  0% {
    /* 第一個幀的樣式 */
    width: 200px;
    height: 350px;
  }  
  50% {
    /* 第一個幀的樣式 */
    width: 350px;
    height: 350px;
  }
  100% {
    /* 最後一個幀的樣式 */
    width: 350px;
    height: 350px;
  }
} 


@keyframes an-arr1 {
  0% {
    /* 第一個幀的樣式 */
    top:160px;
    left:160px;
  }  
  50% {
    /* 第一個幀的樣式 */
     top:160px;
    left:160px;
    transform: rotate(0.13turn);
  }
  100% {
    /* 最後一個幀的樣式 */
  top:160px;
  left:85px;
  transform: rotate(0.25turn);
  }
} 

@keyframes an-arr1-r {
  0% {
    /* 第一個幀的樣式 */
    transform: rotate(0.25turn);
   ...

JavaScript

$('div.wrap').on('click', function() {
  var $this = $(this);

  if ($this[0].classList.contains("active")) {
    $(this).removeClass('active w1')
           .addClass('w1-r');
    const $d1 = $('.d1').removeClass('s1')
                        .addClass('s1-r').html('M0001');
    const $d2 = $('.d2').removeClass('s2')
                        .addClass('s2-r').html('K9999'); 
    $('.arrow').removeClass('arr1').addClass('arr1-r');  
  } 
  
  else {
    $(this).removeClass('w1-r')
           .addClass('active w1');
    $('.d1').addClass('s1')
            .removeClass('s1-r').html('M0001');
    $('.d2').addClass('s2')
             .removeClass('s2-r').html('K9999');
    $('.arrow').removeClass('arr1-r').addClass('arr1');
  }
})