我正在网站上使用Daniel Eden's animate.css。效果很好,但是我对已经应用了transform:translate()
的元素遇到了问题。
我有一个div
,它固定在页面底部,在x方向上变换了-50%,在y方向上变换了-100%,以使其居中:
#resend_activation_div {
position:fixed;
top:100%;
left:50%;
transform:translate(-50%, calc(-100% - 10px));
}
单击X时,将animated fadeOutDown
添加到classList
的div
中。我希望元素从其在页面上的位置直接向下淡出。问题是,动画以以下方式工作...
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
...因此,我原来的变换规则被覆盖,并且该元素沿上图中的蓝色箭头方向淡出。
到目前为止,我发现唯一克服此问题的方法是定义一个新类,该类具有我想要的翻译,并在classList
中使用它,而是...
@-webkit-keyframes fadeOutDownWithCentering {
from {
opacity:1
}
to {
opacity:0;
-webkit-transform:translate3d(-50%, 100%, 0);
transform:translate3d(-50%, 100%, 0)
}
}
...可行,但这意味着为我在元素上进行的每个不同变换为每个动画编写新规则!
所以我的问题是:是否有更聪明的方法?我可以在动画规则中执行转换时让CSS尊重我的原始转换吗?
const foo = document.querySelector('.foo')
const bar = document.querySelector('.bar')
bar.addEventListener('click', e => {
foo.classList.toggle('hidden')
})
* {
box-sizing: border-box;
font-family: Helvetica;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
.foo {
--initial-transformY: -10px;
position: absolute;
bottom: 0;
left: 50%;
width: 40%;
background: #121212;
color: white;
border-radius: 5px;
padding: 16px;
text-align: center;
translate: -50% var(--initial-transformY);
transition:
translate .5s ease,
opacity .5s ease;
}
.foo.hidden {
--addition-transformY: 30px;
opacity: 0;
translate: -50% calc(var(--initial-transformY) + var(--addition-transformY));
}
.bar {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
padding: 16px;
background: #ad17fd;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
transition: all .2s ease;
}
<div class="foo">Hello there, I am foo</div>
<button class="bar">Click me to move foo</button>