Question

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

我从cubic-bezier(0.4, -0.5, 1,1);开始作为计时功能必须增长效果。但是我没能达到我上面提到的条件。

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（a.k.a。轻松自如）：以上两种情况（慢速开始和快速结束）
spring（a.k.a。预期/重叠）以弹性方式越过值以便从相反方向（预期）开始或从相反方向（重叠）停止

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

工具：当我没有适当的工具时，我需要理解cubic-bezier()，至少从我的角度来看，与现在相比。当Chrome向他们的开发者控制台添加实时可视化工具时，情况发生了巨大变化。在Chrome中的任何元素上打开控制台，然后单击该元素上cubic-bezier()集旁边的小方块符号。并拖动点段以更改贝塞尔函数恭喜！您现在正式成为cubic-bezier()专家。

css，不同类的反向过渡

1 个答案: