css，不同类的反向转换

Question

当元素的宽度增加时，我希望我的动画通过缩小开始，当它变大时立即停止。当它很大时，我想立即开始并比最终状态缩小一点。然而，当元素进入页面时，该元素从页面下方开始，直到它位于中心。

我从 cubic-bezier(0.4, -0.5, 1,1); 开始，作为必须增长效果的计时函数。但是，我无法满足上述条件。

jsfiddle

let big = document.getElementById('big')
let cube  = document.getElementById('cube')

big.addEventListener("click", t)

function t (){
 let isBig = cube.classList.contains('big')
 if(isBig){
  cube.classList.remove("big")
  cube.classList.add("small")
	big.innerText =  "Make big" 
 }
 else{
 		cube.classList.remove("small")
  	cube.classList.add("big")
		big.innerText =  "Make small" 
 }
}

.ctnr{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow:hidden;
}
.cube{
  height: 10rem;
  margin-bottom: 0;
  transition: width 1s;
  transition-timing-function: cubic-bezier(0.4, -0.5, 1,1); 
  animation-name: incomming;
  animation-duration: 0.7s;
}

.big{
  width: 20rem;
  background:orange;
}
.small{
  width: 10rem;
  background:deeppink;

}

@keyframes incomming {
  0%{
    margin-bottom:-100%;
  }
  100%{
    margin-bottom: 0;
  }
}

<button id="big">
Make big
</button>
<div class="ctnr">
  <div id="cube" class="cube small">

  </div>
</div>

Answer 1

您的动画描述有点不清楚(至少对我而言)，但据我了解，它应该是:

.cube{
  transition-timing-function: cubic-bezier(.84,0,.63,1.42);
}
.big.cube {
  transition-timing-function: cubic-bezier(.35,-.35,.48,.84);  
}

let big = document.getElementById('big')
let cube  = document.getElementById('cube')

big.addEventListener("click", t)

function t (){
 let isBig = cube.classList.contains('big')
 if(isBig){
  cube.classList.remove("big")
  cube.classList.add("small")
	big.innerText =  "Make big" 
 }
 else{
 		cube.classList.remove("small")
  	cube.classList.add("big")
		big.innerText =  "Make small" 
 }
}

.ctnr{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow:hidden;
}
.cube{
  height: 10rem;
  margin-bottom: 0;
  transition: width 1s;
  transition-timing-function: cubic-bezier(.84,0,.63,1.42);
  animation-name: incomming;
  animation-duration: 2s;
}

.big{
  width: 20rem;
  background:orange;
}
.big.cube {
  transition-timing-function: cubic-bezier(.35,-.35,.48,.84);  
}
.small{
  width: 10rem;
  background:deeppink;
}

@keyframes incomming {
  0%{
    margin-bottom:-100%;
  }
  100%{
    margin-bottom: 0;
  }
}

<button id="big">
Make big
</button>
<div class="ctnr">
  <div id="cube" class="cube small">

  </div>
</div>

...或者:

.cube{
  transition-timing-function: cubic-bezier(.84,0,.63,1.42);
}
.big.cube {
  transition-timing-function: cubic-bezier(.35,-.35,.84,.48);  
}

let big = document.getElementById('big')
let cube  = document.getElementById('cube')

big.addEventListener("click", t)

function t (){
 let isBig = cube.classList.contains('big')
 if(isBig){
  cube.classList.remove("big")
  cube.classList.add("small")
	big.innerText =  "Make big" 
 }
 else{
 		cube.classList.remove("small")
  	cube.classList.add("big")
		big.innerText =  "Make small" 
 }
}

.ctnr{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow:hidden;
}
.cube{
  height: 10rem;
  margin-bottom: 0;
  transition: width 1s;
  transition-timing-function: cubic-bezier(0.84, 0, 0.63, 1.42);
  animation-name: incomming;
  animation-duration: 2s;
}

.big{
  width: 20rem;
  background:orange;
}
.big.cube {
  transition-timing-function: cubic-bezier(.35,-.35,.84,.48);  
}
.small{
  width: 10rem;
  background:deeppink;
}

@keyframes incomming {
  0%{
    margin-bottom:-100%;
  }
  100%{
    margin-bottom: 0;
  }
}

<button id="big">
Make big
</button>
<div class="ctnr">
  <div id="cube" class="cube small">

  </div>
</div>

让我知道我是否做对了，或者您是否想要修改它。如果没有一个是正确的，也许你可以使用其中的一些术语，以便我更好地理解它:

• ease-in:逐渐加速
• ease-out:逐渐减速
• ease-in-out(又名 easy ease):以上两者(慢速开始和快速中间结束)
• spring(又名预期/重叠)以 flex 方式遍历值，以便从相反方向开始(预期)或从相反方向停止(重叠)

注意:可能会经历the 12 animation principles由 Disney 定义可能会帮助您更好地描述您所追求的效果。

工具:当没有合适的工具时，我需要理解 cubic-bezier()，至少从我的 Angular 来看并与现在相比。当 Chrome 在他们的开发者控制台中添加了一个实时可视化工具时，这种情况发生了翻天覆地的变化。在 Chrome 中的任何元素上打开控制台，然后单击该元素上设置的 cubic-bezier() 旁边的小方 block 符号。并拖动点段来改变贝塞尔曲线。
恭喜!您现在正式成为 cubic-bezier() 专家。