代码之家 › 专栏 › 技术社区 › Sederfo

在上一次转换结束后将转换应用于CSS元素

css-transforms css

Sederfo · 技术社区 · 3 年前

我试图将两个变换链接在一起,但我希望第二个变换在第一个变换结束后开始。

这就是我试图做到的:

.trailingNote {
  position:absolute;
  bottom:0px;
  background:black;
  width:20px;
  transition: transform  5s;
  transition-timing-function: linear;

  }
.trailingNote-moveUp{
  transform: scaleY(10) translateY(-200px);
}

基本上,我希望元素在y轴上缩放10,然后在scaleY结束后,启动translateY(-200px)以向上移动缩放的元素。

代码笔链接: https://codepen.io/Sederfo/pen/abqOoOP

2 回复 | 直到 3 年前

Asplund Ransh Anand 3 年前

使用 CSS keyframes

function startAnimation() {
  var element = document.getElementById("x");
  element.classList.add("trailingNote-moveUp");
}

.trailingNote {
  position:absolute;
  bottom:0px;
  background:black;
  width: 20px;
}
 
.trailingNote:hover, .trailingNote-moveUp {
  animation: animate 5s linear forwards;
}


@keyframes animate {
  0% {
    transform: none;
  }
  50% {
    transform: scaleY(10);
  }
  100% {
    transform: scaleY(10) translateY(-200px);
  }
}

<div id="x" class="trailingNote">Note</div>
<button onclick="startAnimation()">Animate</button>

UPinar 3 年前

你可以用这样的东西。

const box = document.getElementById('box');

const button = document.querySelector('button');

button.addEventListener('click', () =>{
    box.classList.add('transform-1');
    box.addEventListener('transitionend', () =>{
        setTimeout(function (){
            box.classList.add('transform-2');
        },1000)
    })
});

*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  min-height: 100vh;
  margin: 0;
  background-color: bisque;
  display: grid;
  place-content: center;
}

button{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.box{
  width: 5rem;
  height: 5rem;
  background-color: brown;
  transition: all  1s linear;
}

.transform-1{
  transform: scaleY(5);
}

.transform-2{
  transform: translateY(-2000px);
}

<div class="box" id="box"></div>
<button>Click me</button>

推荐文章

Jam3sn · 变量旋转文本的绝对位置

7 年前

John Balvin Arias · 当css transform:scale()处于活动状态时,单击边框按钮会触发单击

7 年前

Joshua Leung · 如何旋转文本并固定到右下角?

7 年前

marius · jQuery UI可选css转换问题

7 年前

jean-max · 矩形中的菱形HTML和CSS3

7 年前

Eugenio · 无极旋转DIV,但具有绝对定位

7 年前

Boucherie · CSS/SCSS rails转换div,但不是嵌套图像(rails)

7 年前

akhil regonda · 如何使用transform scale删除屏幕上显示的滚动条?

7 年前

JV Lobo · 具有transform属性的元素内的子元素z索引

7 年前

Scoob · 在flexbox中不工作的锚点元素上变换比例

7 年前