我正在尝试制作类似fullpage.js的内容。我有一个活动元素和前一个元素。当我滚动时,我在两个块上都有转换属性,例如
.active {
transform: translateY(0);
opacity: 1;
transition: all 1s ease;
}
另一个是
.previous {
transform: translateY(100vh);
opacity: 0;
transition: all 1s ease;
}
没有过渡,他们会毫不拖延地出现。但是当我添加转换时,由于不透明度,它们开始闪烁。如何首先使块变换然后失去它的不透明度
答案 0 :(得分:0)
您只需定义multiple transitions:
即可
div {
width: 200px;
height: 200px;
background: orange;
opacity: 0.5;
transition: transform 0.5s ease 0s, opacity 0.5s ease 0.5s;
}
body:hover div {
transform: rotate(45deg);
opacity: 1;
}
<div></div>