Apple、阿里平台都在用的官网过渡动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform and Fade In Example</title>
<style>
.box {
position: relative;
transform: translate(100px, 0px);
opacity: 0;
transition: transform 2s ease-out, opacity 2s ease-out;
}
.box.show {
transform: translate(0px, 0px);
opacity: 1;
}
</style>
</head>
<body>
<div id="box" class="box">Hello, World!</div>
<button onclick="fadeIn()">Fade In</button>
<script>
function fadeIn() {
var element = document.getElementById('box');
element.classList.add('show');
}
</script>
</body>
</html>代码详解：
-
初始状态：
.box类设置元素的初始状态：transform: translate(100px, 0px);将元素向右移动 100 像素。opacity: 0;设置透明度为 0，使元素不可见。
transition属性设置了两个动画效果：位置（transform）和透明度（opacity）的渐变，时长 2 秒，使用ease-out缓动函数。
-
目标状态：
.box.show类定义了动画效果完成时的状态：transform: translate(0px, 0px);将元素移动到其初始位置。opacity: 1;设置透明度为 1，使元素完全可见。
-
JavaScript 逻辑：
fadeIn函数在按钮点击时被调用。- 函数选择 id 为
box的元素，并添加.show类，从而触发 CSS 过渡效果。
这种方法通过添加一个类来改变元素的视觉状态，这样可以轻松控制和管理复杂的动画效果。希望这个示例能够帮助你实现你想要的动画效果！
扫一扫
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
