javascript - 如何在不透明度增加的情况下翻译按钮单击时的 div?
问题描述
如何在不透明度增加的情况下翻译按钮单击时的 div?最初 div 不透明度为零。我希望 div 需要从 转换为,并从按钮单击300px
开始0px
增加不透明度。0 to 1
我的翻译不工作。不透明度工作正常。
这是我的代码https://codesandbox.io/s/magical-snowflake-hgekv?file=/index.html:0-850
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 300px;
top: 0;
opacity: 0;
transition: left opacity 2s ease-in-out 0s;
}
.new {
opacity: 1;
left: 0;
}
</style>
<script>
function abc() {
document.querySelector(".div").classList.add("new");
}
</script>
</head>
<body>
<div class="div"></div>
<div style="position: absolute; top: 300px;">
<button onclick="abc()">Play</button>
</div>
</body>
</html>
解决方案
将以下 CSS 添加到您的新课程中
.new {
left: 0;
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
推荐阅读
- javascript - 在仅使用 javascript(无库)单击所述元素时,如何将 html 元素类或 id 存储在变量中?
- image - 在 Flutter 中将具有自定义大小和旋转的图像绘制到 CustomPaint 中
- linux - dlopen 对“同一个库”的定义
- gulp - Gulpfile - 将 node_module dist 文件复制到根目录
- mysql - TRUNCATE 和 TRUNCATE TABLE 有什么区别?
- typescript - 如何获取 TypeScript 中重写方法的参数类型?
- php - 使用 $_SESSION 每次刷新(来自上一次)时数组中的唯一整数
- google-drive-api - 在 Google Drive 或 Dropbox 中托管图像以供应用使用
- java - Java RSA 密码学:RSA 模数有一个小的素因数
- python - 解释高级字符串格式化python