css - CSS，不同类的反向转换

当元素的宽度增加时，我希望动画在开始变大时立即缩小并立即停止。当它很大时，我想立即开始并缩小一点，直到结束状态。但是，当元素进入页面时，元素将从页面下方开始，直到它位于中心。

我从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>

最佳答案

您对动画的描述还不清楚（至少对我而言），但据我所知应该是：

.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（又称轻松）：以上两项（慢速开始和快速中间结束）
spring（又称预期/重叠）以弹性方式超过该值，以便从相反的方向开始（预期）或从相反的方向停止（重叠）


注意：可能要通过迪士尼定义的the 12 animation principles可能会帮助您更好地描述所追求的效果。

工具：至少在我看来并与现在相比，当没有适当的工具时，我需要弄清楚cubic-bezier()的含义。当Chrome在其开发者控制台中添加了实时可视化工具时，情况发生了巨大变化。在Chrome中任何元素上打开控制台，然后单击该元素上设置的cubic-bezier()旁边的小方形符号。并拖动圆点段以更改贝塞尔曲线功能。
恭喜你！您现在正式是cubic-bezier()专家。

关于css - CSS，不同类的反向转换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42743415/