老师，我这个动画不能从右侧进入，哪里需要改进一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>extend</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
overflow: hidden;
background: #e2e2e2;
}
.container .content {
float: right;
width: 129px;
height: calc(100vh);
background: #000;
transform: translate(129px, 0);
}
.container .content-hover {
float: right;
width: 129px;
height: calc(100vh);
background: #000;
transform: translate(0px, 0);
}
.container .arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 20px 20px;
border-color: transparent #000 transparent transparent;
position: absolute;
top: 50px;
right: 0;
/* transform: translate(129px, 0); */
}
.arrow-hover {
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 20px 20px;
border-color: transparent #000 transparent transparent;
position: absolute;
top: 50px;
right: 129px;
/* transform: translate(0px, 0); */
}
/* .container .arrow:hover {
animation: mymove 1s .5s ease-in-out 1;
animation: mycontent 1s .5s ease-in-out 1;
}
@keyframes mymove {
from {
transform: translate(129px, 0);
}
to {
transform: translate(0, 0);
}
}
@keyframes mycontent {
from {
transform: translate(129px, 0);
}
to {
transform: translate(0, 0);
}
} */
</style>
</head>
<body>
<div class="container">
<div class="content" id="content"></div>
<div class="arrow" id="arrow" onclick="myArrow()"></div>
</div>
<script>
function myArrow() {
if (document.getElementById('arrow') && document.getElementById('arrow').className == 'arrow-hover') {
document.getElementById('arrow').className = 'arrow'
document.getElementById('content').className = 'content'
} else {
document.getElementById('arrow').className = 'arrow-hover'
document.getElementById('content').className = 'content-hover'
}
run();
}
// 需要动画的目标元素
var elem = document.getElementById('content');
console.log(parseInt(window.getComputedStyle(elem)['width']), '原始宽度')
// 用JS获取transform样式的值
var transX = document.defaultView.getComputedStyle(elem, null).transform;
var transX = transX.split(',')
console.log(transX, 'transform')
// 用JS设置transform样式的值
// transX.style.transform = 'translateX(-' + 200 + 'px)'
// 动画配值
var options = {
width: '130px',
// transform: translate(129, 0),
duration: 1000
}
// 启动动画
function run() {
animate.call(elem, options)
}
// 动画逻辑
function animate() {
// 动画的具体实现
var timer = null; // 定时器
// 原始宽度
var startWidth = parseInt(window.getComputedStyle(elem)['width']);
// 结束宽度
var endWidth = parseInt(options.width);
function createTime() {
return (+new Date);
}
var startTime = createTime()
// 当前时间，在logic函数中动态获取
function logic() {
// 开始时间 + 持续时间 - 当前时间，结果即为动画的剩余时间，当剩余时间小于0则置0，表示动画结束
var remaining = Math.max(0, startTime + options.duration - createTime())
// 根据动画的剩余时间和动画的持续时间，计算出当前动画执行的百分比
var percent = 1 - (remaining / options.duration) // 用1去减，得到已执行的百分比
// 根据动画已执行的百分比，可以计算当前帧元素的样式
// （结束宽度 - 开始宽度）* 百分比 + 开始宽度，即为当前帧div的实际宽度
var nowWidth = (endWidth - startWidth) * percent + startWidth;
// 然后定义一个函数setStyle来为div设置宽度
function setStyle(nowWidth) {
elem.style['width'] = nowWidth + 'px'
}
// 通过percent来判断当前动画是否结束，如果结束，就设置样式并且清除定时器，否则只设置样式即可
if (percent == 1) {
setStyle(nowWidth)
clearInterval(timer)
timer = null;
} else {
setStyle(nowWidth)
}
}
// 启动定时器
timer = setInterval(logic, 13)
}
</script>
<!-- 原生js实现的动画的基本原理是：用window.setinterval(logic, time)控制动画的整体运行过程，logic用于计算和设置当前帧的样式，time给定动画刷新速率 -->
</body>
</html>
正在回答
同学你好，可以添加transition属性，对元素发生改变的属性进行过渡，实现动画效果，示例：
本站的教学服务只包含站内视频内容问题解答、站内习题问题解答、站内作业问题解答、站内测试题问题解答以及站内产品使用问题解答。同学的问题内容与本站视频、习题以及作业等内容无关联，故不包含在本站的教学服务内。
不过老师看同学非常认真好学，所以针对同学粘贴的代码帮助解答了，但老师这里需要给同学一个小小的学习建议，同学现在还刚入门，掌握的技术还不够全面，基础相对比较薄弱，不适合做复杂的课外练习。建议同学自行完成与自身能力相匹配的拓展练习。并且合理安排时间，把学习的重点放在课程内容本身。打好基础，再去做这个练习，就能轻松独立完成了。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星