JS DOM动画

很简单，虽然他这样写不太好，其实就是通过一个定位来移动的，一开始默认top:0;left:0;

点击之后设置它的top和left为350px，因为移动的小方块为宽和高都为50px，所以加起来刚刚好是400PX,刚好到底部，left一样的原理，elemstyletop=pos+"px"就是给获取到这个小块设置一个top的css样式，pos就是传进来的top值，后面的+'px'就是拼接，也就是设置它的top为多少个像素这样,

它里面还设置了一个定时器，每多少时间就执行一下下面的frame函数，当满足条件就清除定时器，逻辑也很简单

<script>

    var i = 100;

    var text = documentgetElementById("text");

    function test() {                 

   

        var div = textparentNode;  //取得id=objID对象的父节点        

        var width = divoffsetWidth; //取得元素宽度        

        

        if (i < 1001) {//如果小于1000的话就把div宽度+1

            i++;

            divstylewidth = i + "px";  

        };                

    };

    //test("text");

    textonclick = function(){//点击执行

        //不断执行div宽度+1

        setInterval('test()',5);

    } 

    </script>

你的问题在于用了for循环了，应该用定时器~

希望我的回答能帮到你哈，有问题可以追问，觉得好就点个赞，有用就采纳！

控制CSS Animation(动画)

就像我们刚刚了解到的，我们可以看到与元素动画相关的事件：animationStart,animationIteration,animationEnd。但是如果我们想改变CSS animation(动画)执行过程中的动画，还需要一点技巧！

animation-play-state属性

当你想在动画执行过程中暂停，并且接下来让动画接着执行。这时CSS的animation-play-state属性是非常有用的。你可以可以通过JavaScript像这样更改CSS(注意你的前缀)：

elementstylewebkitAnimationPlayState = "paused";

elementstylewebkitAnimationPlayState = "running";

然而当使用animation-play-state让CSS 动画暂停时，动画中的元素变形也会以相同的方式被阻止。你不能使这种变形暂停在某个状态，使它变形，使它恢复，更不用期望它能从新的变形状态中恢复到流畅运行。为了实现这些控制，我们需要做一些更复杂的工作。

获取当前keyvalue的百分比

不幸的是，在这个阶段没有办法获得当前CSS动画关键帧的“完成百分比”。最好的获取近似值的方法是使用setInterval 函数在动画过程中迭代100次。它的本质是：动画持续的时间(单位是毫秒)/100。例如，如果动画时长4秒，则得到的setInterval的执行时间是每40ms(4000 / 100)。

var showPercent = windowsetInterval(function() {

if (currentPercent < 100) {

currentPercent += 1;

} else {

currentPercent = 0;

}

// Updates a div that displays the current percent

resultinnerHTML = currentPercent;

}, 40);

这种做法很不理想，因为函数实际运行频率要远少于每40ms。我发现将它设为39ms更准确。但这个也不是好实现，因为它依赖于浏览器，并非所有浏览器下都能得到很完美效果。

获取当前动画的CSS属性值

在理想的情况下，我们选择一个使用CSS动画的元素，删除该元素当前动画再给它添加个新的动画，让它可以从当前状态开始新的动画。但是现实情况却很复杂。

下面我们就有一个演示，用来测试获取和改变CSS动画”中间流”的技术。该动画让一个元素沿一个圆形路径移动，起始位置在圆形的顶部中心(或称为“十二点”)位置。当按钮被单击时，元素的起始位置变成元素当前移动到的位置。元素会沿着之前相同的路径继续移动，只是现在“起始”的位置变成了你按下按钮时元素移动到的位置。通过在动画的第一关键帧把元素的颜色变成红色，来表示元素动画起始点位置发生了改变。

>

/

data:2022-11-17

author:lfp

move运动函数

dom--需要运动的对象

json--{width:100,height:100,left:100,top:100}

callback--回调函数 可调用自己 实现异步动画效果

/

//主函数

function move(dom,json,callback){

//让每一次动画都是新的开始，防止出现动画一直不停的运行

if(domtimer)clearInterval(domtimer);

var i=0;

var start=0;

//在对象中增加timer 便于控制他停止

domtimer=setInterval(function(){

i++;

//循环每一个目标属性添加动画方法

for(var attr in json){

//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替

var cur=getStyle(dom,attr);

if(i==1)start=cur;

//拿到该属性的目标值

var target=json[attr];

//设置分成10次增加增量 你可以根据需要修改

var speed=(target-start)/10;

consolelog(speed+"====="+cur)

//如果没有达到目标值就一直加

if(Mathabs(cur-target)>1){

domstyle[attr]=cur+speed+"px";

}else{

//达到目标值了就停止或者其他情况也停止

clearInterval(domtimer);

//等停止了动画再回调函数进行另外的 *** 作

if(callback)callbackcall(dom);

};

};

},45);

};

//配套函数

function getStyle(dom,attr){

var value="";

if(windowgetComputedStyle){

value=windowgetComputedStyle(dom,false)[attr];

}else{

value=domcurrentStyle[attr];

};

value=parseInt(value);

return value || 0;//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充

};

function $(id){

//return documentgetElementById(id);

return documentquerySelector("#"+id);

};

使用过CSS transition属性的童鞋们应该都清楚，当元素在过渡开始或者结束时的高度为auto时，动画是不生效的；那么如何才能实现元素高度的改变动画效果呢？ 本篇文章将为大家提供一个基于Vue3的非常简洁的解决方案。

要实现高度的改变动画，我们需要在动画进行之前为元素设置准确的高度。

当元素由可见变为隐藏状态时，我们需要先获取元素的计算高度，将其设置到style属性上，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为0，这样高度的改变动画就会正常进行。

当元素由隐藏变为可见状态时，我们需要先将高度设置为auto，然后获取元素的计算高度，再将高度设置为0，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为计算高度，这样高度的改变动画就会正常进行。

现在，根据以上实现原理分析，我们创建一个高度的改变动画通用组件CollapseTransitionvue。该组件非常简单，仅需30多行代码。我几乎每行代码都有注释，大家应该能看懂吧？

以上就是实现高度的改变动画的通用组件源码，童鞋们理解了吗？是不是非常简单？现在，我们实现折叠面板组件。使用过element-ui这样的UI库的童鞋们应该都知道，折叠面板是由两个组件折叠面板Collapse和折叠面板项CollapseItem组合而成；

现在，我们先实现CollapseItemvue组件。为了节省篇幅，我将源码中的空行全部去掉了，缩进比较规范，自认为可读性还行；源码如下，一共30多行，我直接在源码中添加了注释，就不过多解释了。

这是CollapseItemvue组件的样式。

现在，我们实现Collapsevue组件。该组件仍然只有30多行，大家理解起来应该很轻松，我就直接在源码里添加注释作为讲解了；

以上就是折叠面板组件的实现。包括折叠动画组件，一共仅需不到150行代码，是不是非常简单？童鞋们都理解了吗？不管有什么疑问，童鞋们都可以问我。感谢阅读！

在函数中出现 变量声明的时候 会将变量放到 当前函数 开始的位置

(1) getComputedStyle 获取元素的样式

不受限制 不管是不是行间样式 都能获取到

仅在IE中使用

(2) offsetWidth; 算边框

获取 元素的 宽度

元素在水平方向上占用的空间的大小

元素宽度+padding-left+padding-right+border-left+border-right

(3) offsetHeight 获取 元素 高度

元素在垂直方向上占用的空间的大小

元素高度+padding-top+padding-bottom+border-top+border-bottom

(4) offsetLeft 元素左外边框至父级元素的左内边框之间的像素距离

(5) offsetTop：元素左上内框至父级元素的上外边框之间的像素距离

(6) clientWidth 不算边框 里面的内容区域

content + padding

元素的 边框内的区域

元素内容区宽度加上左右内边距的宽度 不算边框 里面的内容区域

(7) clientHeight:元素内容区高度加上上下内边距的宽度

(8) styleleft：通过styleleft获取css样式获取的是行间样式

(9) getAttribute 获取 自定义下标

(10)setAttribute 设置 自定义下标

1根据浏览器宽度 以及 每一列的固定宽度 计算 需要多少列

2循环生成每一个元素 将他添加到 父级元素中

3第一行添加完之后 用 数组 将每一列的高度 储存起来

4从第二行开始 每次添加 新的元素时 判断 那一列高度来最小 将新的元素添加到最小高度那一列

5当滚动条接近于底部时时候 加载新的数据

里面的值 是通过 键值对 的形式储存

key value

key 一般情况下 都使用 字符串 的形式;

你可以看下jquery的源代码，

animate: function( prop, speed, easing, callback ) {

var empty = jQueryisEmptyObject( prop ),

optall = jQueryspeed( speed, easing, callback ),

doAnimation = function() {

// Operate on a copy of prop so per-property easing won't be lost

var anim = Animation( this, jQueryextend( {}, prop ), optall );

// Empty animations, or finishing resolves immediately

if ( empty || jQuery_data( this, "finish" ) ) {

animstop( true );

}

};

doAnimationfinish = doAnimation;

return empty || optallqueue === false

thiseach( doAnimation ) :

thisqueue( optallqueue, doAnimation );

}

jQueryspeed = function( speed, easing, fn ) {

var opt = speed && typeof speed === "object" jQueryextend( {}, speed ) : {

complete: fn || !fn && easing ||

jQueryisFunction( speed ) && speed,

duration: speed,

easing: fn && easing || easing && !jQueryisFunction( easing ) && easing

};

optduration = jQueryfxoff 0 : typeof optduration === "number" optduration :

optduration in jQueryfxspeeds jQueryfxspeeds[ optduration ] : jQueryfxspeeds_default;

// normalize optqueue - true/undefined/null -> "fx"

if ( optqueue == null || optqueue === true ) {

optqueue = "fx";

}

// Queueing

optold = optcomplete;

optcomplete = function() {

if ( jQueryisFunction( optold ) ) {

optoldcall( this );

}

if ( optqueue ) {

jQuerydequeue( this, optqueue );

}

};

return opt;

}

以上就是关于JS DOM动画全部的内容，包括:JS DOM动画、js怎么做一个div宽度变化的动画、如何使用JavaScript控制CSS Animations和Transitions等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！