vue 网页滚动到指定位置显示动画效果

woderlili

于 2022-04-12 13:52:34 发布

阅读量6.8k

点赞数 1

分类专栏： vue 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/sinat_41657240/article/details/124120484

版权

本文探讨了如何在Vue项目中实现在网页滚动到特定位置时，内容区块出现飞入、淡入淡出、向上划入等动画效果，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大部分的网页，在滚动到一定位置的时候，当前区块的文案或者图片有一些飞入，淡入淡出，向上划入的动画效果

//向上划入样式
.boxUp {
   
  transform: translateY(0%) !important; //滚动后的位置
  opacity: 1 !important; //滚动后显现
  transition: all .5s ease;
}

.boxUpTo10 {
   
  transform: translateY(10%); //滚动前的位置
  opacity: 0; //滚动前设置透明隐藏
}

//开始位置在左侧20%位置
.boxleftTo20 {
   
  transform: translateX(-20%); 
  opacity: 0; 
}
//开始位置在右侧120%位置
.boxtranslateXright {
   
  transform: translateX(120%); 
  opacity: 0; 
}

//滚动到指定位置时回到原点
.boxtestenterX {
   
  transform: translateX(0%) !important;

最低0.47元/天解锁文章