极客观点
项目管理
HarmonyOS
我在一个网站上看见transform: translate(0%)是变化的,但是自己试不出来
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 440px;
height: 240px;
background-color: #cecece;
margin: 100px auto;
padding: 0 37px;
box-sizing: border-box;
}
.table {
width: 100%;
height: 41px;
background-color: #e3e3e3;
display: table;
position: relative;
}
.cell {
display: table-cell;
background-color: #665d16;
text-align: center;
vertical-align: middle;
}
.move {
position: absolute;
width: 33.33333%;
height: 100%;
left: 0;
bottom: 0;
transform: translate(0%);
}
.move::before {
content: '';
height: 2px;
width: 100%;
background-color: #1478f1;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="table">
<div class="cell">全球</div>
<div class="cell">全球</div>
<div class="cell">全球</div>
<div class="move"></div>
</div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$('.cell').click(function () {
var num = $(this).index();
$('.move').animate({transform: 'translate(' + num * 100 + '%)'});
// $('.move').css({transform: 'translate(' + num * 100 + '%)'});
})
</script>
</body>
</html>用css可以改变transform,但是用animate不能改变,什么原因?
怎么解决?
截图是w3c中展示的animate的支持属性:
ps: 今天突然想起来有一个这个问题, 回来一看问了题主看到的代码的实现网站, 确实回复了, 只不过没有@我, 所以建议以后要@别人才会有提示.
简单看了一下对方的实现方式, 如图正在移动的过程中:
首先开发是使用的reactjs, t可能是一个nav标签组件的一个state, 因为是动态变化的, 每次在生成一个调用方法的时候都动态生成一个t, 这个暂且不说, 因为和题目无关.
即为每次移动都重新生成一个div, 由
来控制
所以该实现方式与jQuery的animate无关, 题主可以看一下这个实现方式.
ps: react中可以轻松实现这个需求.