Question

我有一个我正在做的动画布局，动画非常接近完美，但在动画的最后阶段，你会看到顶部和底部内部元素“捕捉”到不同的大小最后一秒。我希望最终容器的内部元素高度为20％/ 60％/ 20％。

是否可以这样做并在最后删除“捕捉”效果？

import { Sentry } from 'react-native-sentry'

Sentry.config('key').install();

const one = document.querySelector('.one');
const three = document.querySelector('.three');


one.addEventListener('animationend', function() {
  one.style.position = 'static';
}, true)

three.addEventListener('transitionend', function() {
  console.log('transition working');
  three.style.position = 'static';
}, true)

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  width: 425px;
  height: 500px;
  margin: 5% auto;
  position: relative;
}
    
@keyframes right-up {
  0% {
    width: 50%;
    height: 100%;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 20%;
  } 
}     
.one {
  height: 100%;
  width: 50%;
  background-color: #FFAB7F;
  position: absolute;
  top: 0;
}

.container:hover .one {
  animation: right-up 1s forwards;
}
/* .container:hover .two {
  height: 80%;
} */
.container:hover .three{
  height: 20%;
}
      
.two {
  height: 100%;
  width: 100%;
  background-color: #00529B;
  transition: all 1s;
}

.three {
  height: 0%;
  width: 100%;
  background-color: #83FFA4;
  position: absolute;
  bottom: 0;
  transition: all 1s 1s;
}

Answer 1

希望这可以有所改变。

＆＃13;

const one = document.querySelector('.one');
const three = document.querySelector('.three');


one.addEventListener('animationend', function() {
  one.style.position = 'static';
}, true)

three.addEventListener('transitionend', function() {
  console.log('transition working');
  three.style.position = 'static';
}, true)

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  width: 425px;
  height: 500px;
  margin: 5% auto;
  position: relative;
}
    
@keyframes right-up {
  0% {
    width: 50%;
    height: 100%;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 20%;
  } 
}     
.one {
  height: 100%;
  width: 50%;
  background-color: #FFAB7F;
  position: absolute;
  top: 0;
}

.container:hover .one {
  animation: right-up 1s forwards;
}
/* .container:hover .two {
  height: 80%;
} */
.container:hover .three{
  height: 20%;
}
      
.two {
  height: 100%;
  width: 100%;
  background-color: #00529B;
  transition: all 1s ease;
}

.three {
  height: 0%;
  width: 100%;
  background-color: #83FFA4;
  position: absolute;
  bottom: 0;
  transition: all 1s ease;
}

＆＃13;

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

＆＃13;

Answer 2

我用你的代码玩了一下......告诉我这个解决方案是否适合你：
（我评论了代码而不是删除它）

$hash

/*const one = document.querySelector('.one');
const three = document.querySelector('.three');

one.addEventListener('animationend', function() {
  one.style.position = 'static';
}, true)

three.addEventListener('transitionend', function() {
  console.log('transition working');
  three.style.position = 'static';
}, true)*/

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  width: 425px;
  height: 500px;
  margin: 5% auto;
  position: relative;
}

@keyframes right-up {
  0% {
    width: 50%;
    height: 100%;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 20%;
  } 
}     
.one {
  height: 100%;
  width: 50%;
  background-color: #FFAB7F;
  position: absolute;
  top: 0;
}

.container:hover .one {
  animation: right-up 1s forwards;
}

.container:hover .three{
  height: 20%;
}
      
.two {
  height: 100%;
  width: 100%;
  background-color: #00529B;
  transition: all 1s;
}

.three {
  height: 0%;
  width: 100%;
  background-color: #83FFA4;
  position: absolute;
  bottom: 0;
  transition: all 1s 1s;
}

我希望它有所帮助。

如何防止我的动画结束突然“啪”一声？

2 个答案: