Javascript 当div更改其位置时，是否有路径的概念？

下面的代码有一个

div

，单击时它会在两个容器

div

之间“移动”

newvue({
el:“集装箱”，
数据：{
左：对
}
})

#容器{
宽度：500px；
显示器：flex；
证明内容：之间的空间；
}
#左{
宽度：100px；
背景色：红色；
}
#对{
宽度：100px；
背景颜色：绿色；
}

要素
要素

一个简单的脚本，用于设置div从原点移动到目标的动画：

move（document.querySelector（“元素”）、document.querySelector（“目的地”）；
功能移动（元素、目标）{
var destinationElement=element.cloneNode（true）//https://developer.mozilla.org/fr/docs/Web/API/Node/cloneNode
destinationElement.style.visibility=“隐藏”；
destination.appendChild（destinationElement）；
设置动画（元素、目标元素）；
}
//最好使用jquery动画：http://api.jquery.com/animate/
函数动画（元素、目标、步骤）{
如果（！步）
步长=0；
var阶跃=100；
var origin=element.getBoundingClientRect（）；
element.style.position=“绝对”；
element.style.top=（origin.top*（（步骤-步骤）/步骤）+
destination.getBoundingClientRect（）.top*（步骤/步骤））+“px”；
element.style.left=（origin.left*（（步骤-步骤）/步骤）+
destination.getBoundingClientRect（）.left*（步骤/步骤））+“px”；
如果（步骤<步骤）{
setTimeout（函数（）{
设置动画（元素、目标、++步）；
},50);
}否则{
element.parentNode.removeChild（元素）；
destination.style.visibility=“可见”；
}
}

#来源{
宽度：60px；
高度：150像素；
边框：实心1px红色；
}
#目的地{
宽度：100px；
高度：50px；
位置：相对位置；
顶部：-50px；
左：200px；
边框：实心1px绿色；
}
#元素{
宽度：10px；
高度：20px；
边框：纯色1px蓝色；
背景颜色：蓝色；
}

---

好的，谢谢你更好地向我解释你的用例。现在你需要什么就更清楚了

请看下面修改过的演示，或者看看这个

在演示中，我添加了两个滑块和过滤，因为我了解了它应该如何工作。一个“自编码”滑块和一个使用依赖项的滑块

我认为这两种方法都适用于您，但我可能会使用该库，因为它会减少您的代码和样式

它是如何工作的？

我正在使用一个名为

animation

的过渡动画

transition:all 0.5s ease和两个类：


left position
为绿色背景色和
margin left:0设置类，使元素位于容器的左侧

右侧位置
红色背景和
左侧边距的等级：计算（75%-20px）用于正确的位置。
-20px
是因为我添加了填充，75%是因为元素有25%的宽度，有一个边距将元素推向右边缘


通过切换
include
属性，将触发动画，并对边距更改设置动画

我在演示中检测到的问题


两个滑块可能不同步-切换底部滑块将切换两个滑块，但切换另一个滑块不会切换库滑块。不确定，这里出了什么问题，但只要提一提，如果你只使用一个，它不会是一个问题
列表转换有时看起来有点奇怪-如果项目由于过滤器更改而被删除，它们就会出现并逐渐消失

注意

演示中的标记输入是非常基本的，我会使用一个库来实现这一点，但这不是问题所在，我认为它适合演示


Vue.use（窗口['Vue-js-toggle-button']，默认）
新Vue({
el:“集装箱”，
/*组成部分：{
切换按钮：窗口['vue-js-toggle-button']
},*/
数据：{
包括:对,，
filterTags:'奇偶'，
文章：[{
id:0，
标题：“Test0”，
标签：[“偶数”]
},
{
id:1，
标题：“Test1”，
标签：['odd']
},
{
id:2，
标题：“Test2”，
标签：[“偶数”]
},
{
id:3，
标题：“Test3”，
标签：['odd']
},
{
id:4，//仅用于测试奇偶排除
标题：“Test4”，
标签：[“无编号”]
}
]
},
计算：{
过滤（）{
返回此.articles.filter（（article）=>
article.tags.some（（tag）=>
{
让结果=this.filterTags&&this.filterTags.indexOf（标记）！=-1
返回此。包括？结果：！结果；
})
)
}
},
方法：{
updateFilterInclude（{value}）{
console.log（值）
此参数=值
}
}
})
正文{
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
}
.vue js开关#更改字体{
字体大小：16px！重要；
}
保险商实验室{
列表样式类型：无；
}
.翻转列表移动{
转变：转变0.5s；
}
#容器{
宽度：200px；
/*边框：1px纯黑*/
位置：绝对位置；
左：0；
填充物：5px；
}
.动画{
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
-ms过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}
.左位置{
背景颜色：绿色；
/*变换：平移（0,0）*/
左边距：0；
}
.正确的位置{
背景：红色；
/*转换：转换（100%，0）*/
左边距：计算（75%-20px）；
}
输入{
宽度：钙（100%-14px）；
填充物：5px；
}
.滑块{
边框：1px纯色灰色；
边缘顶部：5px；
填充物：5px；
边界半径：10px；
}
.元素{
宽度：25%；
光标：指针；
填充：10px；
/*边框：1px纯黑*/
边界半径：10px；
}

过滤标签