vue 滚动动画,vue实现卡片飞出的动画
本文主要详细介绍如何使用Vue制作卡片无限滚动动画。文中的样例代码讲解的很详细，对我们学习很有帮助，有需要的可以参考一下。
目录
概要设计详细设计高级功能分析概要设计详细设计完整代码
概要设计
设置css的动画在适当的时间点重置动画，在视觉上实现无限滚动的效果。
详细设计
计算动画所需卡片的dom节点数(即视觉上可以看到的最大卡片数)，如图1所示。窗口高度120px，卡片高度56px，上下边距24px，一张卡片最多能占56 24*2=104px。当卡片在窗口的垂直中心时，卡片的顶部和底部的高度为(120-104)/2=8px，以承载其余的卡片，因此预设卡片的dom节点数为3。
图1
图2
设置动画的运动轨迹和持续时间，以实现可视的圆形滚动效果。如图3所示，初始状态下，第一张卡片的位置距离窗口顶部24px。当第二张卡片移动到距离窗口顶部24px的位置时，重置动画可以实现视觉上的连续滚动效果。卡片向上滚动的计算公式为[从顶部开始的初始距离-从目标到顶部的距离]，即56 24*2-24=80px，所以将动画帧的目标位置设置为transform: translateY(-80px)。
代码实现：
模板
div class=wrapper
div class=容器
内容 v-for=i in 3 :key=i
图片
class=" image "
src= https://static-legacy . ding talk . com/media/ladpdhmwd 9 zbqxna 8 dna8a _ 960 _ 960 . jpg
alt=
/
Span 5已获得500元JD.COM卡/span
/div
/div
/div
/模板
脚本语言
从“vue”导入{ define component }；
导出默认定义组件({
setup() {}，
});
/脚本
样式范围。包装{
高度：500px
显示器：flex
对齐-项目：居中；
justify-content:居中；
}。容器{
宽度：300px
高度：120px
溢出：隐藏；
背景：# ccc
}。内容{
宽度：290px
高度：56px
显示器：flex
边距：24px自动；
背景：# fff
边框半径：100像素；
flex-flow:row nowrap；
对齐-项目：居中；
背景-滤镜：模糊(4px)；
动画：卷轴3s线性1s无限；
}。图像{
宽度：36px
高度：36px
边距：auto 10px
边框半径：100%；
}
跨度{
字体系列：方平SC；
字体大小：20px
行高：20px
文本对齐：居中；
}
@关键帧滚动{
从{
transform:translate y(0)；
}
到{
transform:translate y(-80px)；
}
}
/风格
效果显示：
进阶功能
更新动态卡的数据
功能分析
卡片仍然无限滚动，但是每张卡片显示不同的数据，这意味着每次滚动时窗口中的dom节点都不相同。
概要设计
基于上述功能分析，可以得出两种设计思路：
想显示多少dom节点就渲染多少，简单粗暴，没有考虑动态更新数据的问题；当数据量较大时，会导致页面性能较差。除非数据量很小，否则不推荐。固定dom节点的数量，当dom节点移出窗口时更新数据；需要保证修改dom节点时窗口中的卡片不会闪烁；(已通过)
详细设计
1.根据当前窗口的宽度和高度以及卡片的宽度和高度，设置卡片的六个dom节点，每三张卡片分成一个块，这里两个块是card1和card2(如下图)。
2.将两块的位置重叠(为了设计动画方便)，card2上移(56 ^ 24)* 3=240 px。
3.计算延迟执行card2动画所需的时间。在这里，我设置每个卡牌块动画的移动距离为480px，执行时间为12s。那么card2的延迟执行时间公示为[延迟距离(卡高)/速度]，即240/480/12=6s。因此动画帧被设置为
@关键帧滚动1 {
从{
transform:translate y(0)；
左：0；
}
到{
transform:translate y(-480 px)；
}
}
@关键帧滚动2 {
从{
transform:平移y(-240 px)；
左：0;
}
到{
transform:平移y(-720 px)；
}
}。测试1 {
动画：滚动1 12s线性0s无限；
边距-顶部：120像素
}。测试2 {
动画：滚动2 12s线性6s无限；
transform:平移y(-240 px)；
}
4.监听卡片块，当卡片块移出视窗时，触发数字正射影像图节点刷新。监听使用交叉观测器这个api。
@关键帧滚动1 {
从{
transform:平移y(0)；
左：0;
}
到{
transform:平移y(-480 px)；
}
}
@关键帧滚动2 {
从{
transform:平移y(-240 px)；
左：0;
}
到{
transform:平移y(-720 px)；
}
}。测试1 {
动画：滚动1 12s线性0s无限；
边距-顶部：120像素
}。测试2 {
动画：滚动2 12s线性6s无限；
transform:平移y(-240 px)；
}
完整代码
以下为完整代码：
模板
div class=wrapper
div class=容器
div class=test1 id=card1
div class= content v-for= item in cardarr 1 :key= item
img class= image src= https://静态-传统。丁说话了。com/media/ladpdhmwd 9 zbqxna 8 DNA 8 a _ 960 _ 960。 jpg
alt= /
跨度
{{ item }}已获得500元京东卡
/span
/div
/div
div class=test2 id=card2
div class= content v-for= item in cardarr 2 :key= item
img class= image src= https://静态-传统。丁说话了。com/media/ladpdhmwd 9 zbqxna 8 DNA 8 a _ 960 _ 960。 jpg
alt= /
跨度
{{ item }}已获得100元京东卡
/span
/div
/div
/div
/div
/模板
脚本语言
从“vue”导入{ ref，defineComponent，on mounted }；
导出默认定义组件({
setup() {
设firsrObserver=true
let data:any=[]；
对于(设I=1；i=10i ) {
数据推送(一);
}
const cardarr 1=refArrayany(数据。slice(0，3))；
const cardarr 2=refArrayany(数据。slice(3，6))；
console.log(cardArr1.value，cardarr 2。值)；
设当前索引=6；
const getNewData=()={
if (currentIndex 3=data.length) {
返回data.slice(currentIndex，(当前索引=当前索引3))；
}否则{
设rst=数据。slice(当前索引)；
当前索引=3-rst。长度；
Array.prototype.push.apply(rst，data.slice(0，当前索引))；
返回英特尔的快速储存技术
}
};
const observer 2=新的相交观察点((entry:any)={
//第三第四第五加载新数据
如果(!条目[0]。正在交叉
console.log(条目);
如果(条目[0]。目标。id===卡片1 ){
cardArr1.value.splice(0，3，get new data())；
}否则{
cardArr2.value.splice(0，3，get new data())；
}
console.log(cardArr1.value，cardarr 2。值)；
}
firsrObserver=false
});
onMounted(()={
观察者2号。观察(文档。getelementbyid( card 1 )作为html元素)；
观察者2号。观察(文档。getelementbyid( card 2 )作为html元素)；
});
返回{
数据，
cardArr1，
cardArr2，
};
},
});
/脚本
样式范围。包装{
高度：500像素
显示器：flex
对齐-项目：居中；
/*背景：粉色；*/
对齐-内容：居中；
}。容器{
宽度：300像素
高度：120像素
溢出：隐藏；
背景：# ccc
}。测试1 {
动画：滚动1 12s线性0s无限；
边距-顶部：120像素
}。测试2 {
动画：滚动2 12s线性6s无限；
transform:平移y(-240 px)；
}。内容{
宽度：290像素
高度：56px
显示器：flex
边距：24px自动；
背景：# fff
边框半径：100像素；
flex-flow:row nowrap；
对齐-项目：居中；
背景-滤镜：模糊(4px)；
}。图像{
宽度：36px
高度：36px
边距：自动10px
边框半径：100%;
}
跨度{
字体系列：方平SC；
字体大小：20px
行高：20px
文本对齐：居中；
}
@关键帧滚动1 {
从{
transform:平移y(0)；
左：0;
}
到{
transform:平移y(-480 px)；
}
}
@关键帧滚动2 {
从{
transform:平移y(-240 px)；
左：0;
}
到{
transform:平移y(-720 px)；
}
}
/风格
效果展示：
以上就是基于某视频剪辑软件实现实现卡片无限滚动动画的详细内容，更多关于某视频剪辑软件无限滚动动画的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。