javascript - Jquery animate 不适用于变换属性
问题描述
因此,当我尝试使用 Jqueryanimate
函数时,它根本不起作用。我尝试了每一件事,但仍然无法正常工作。这是HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(".show").click(function () {
$(".error-box").animate({
transform: "translateX(0%)",
}, 500);
});
</script>
<style>
.error-box {
transform: translateX(-100%);
}
</style>
</head>
<body>
<div class="error-box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore,
excepturi?
</div>
<button class="show">Göster</button>
</body>
</html>
解决方案
我建议通过添加一个带有 rule 的类来使用动画transform: translateX(0%)
。像那样:
$(".error-box").addClass('animate');
添加动画延迟并将此类添加到您的CSS transition: .5s
:.error-box
.error-box.animate {
transform: translateX(0%);
}
结果,您将获得所需的结果。
$(".show").click(function () {
$(".error-box").addClass('animate');
});
.error-box {
transform: translateX(-100%);
transition: .5s;
}
.error-box.animate {
transform: translateX(0%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="error-box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, excepturi?
</div>
<button class="show">Göster</button>
推荐阅读
- django - 无法在 Django 测试类中加载对象
- c# - 如何将值传递给 MVC 模型
- amazon-web-services - 使用 boto3 或 CLI 推迟 Amazon Redshift 维护时段
- hibernate - Hibernate 如何在使用 Auto DDL 时确定表列的默认长度和数据类型
- reporting-services - 如何从 SSRS 数据集行中获取条件为真的值
- javascript - 我可以在没有 Window.print 的情况下用 javascript 将 HTML 保存为 PDF 吗?
- python - 这个正则化代码如何影响损失?
- c# - 在实体框架中添加 AsNoTracking 会影响计数吗?
- java - 如何在Java中使用没有初始化的数组
- django - KeyError: 'collectstatic' 将 Django 应用程序部署到 pythonanywhere 时