当前位置: 首页 > news >正文

css实现左右切换平滑效果

2025.02.25今天我学习了如何用css实现平滑效果

一、html相关代码

(1)设置往左、往右的动画属性,样式可以放在同一级。

(2)必须设置唯一key进行刷新数据,使用v-show来展示每次渲染的组件数量。

<transition-group :name="switch_type=='up'?'to-left':'to-right'" tag="div" style="width: 100%;display: flex;align-items: center">
  <div v-for="(item,index) in 7" :key="index" v-show="index<4"></div>
</transition-group>

二、css代码

//往左平滑
.to-left-enter-active, .to-left-leave-active {
  transition: transform 0.5s;
}

.to-left-enter-to, .to-left-leave {
  transform: translateX(0);
}

.to-left-enter, .to-left-leave-to {
  transform: translateX(-100%);
}


//往右平滑
.to-right-enter-active, .to-right-leave-active {
  transition: transform 0.5s;
}

.to-right-enter-to, .to-right-leave {
  transform: translateX(0);
}

.to-right-enter, .to-right-leave-to {
  transform: translateX(100%);
}

http://www.dtcms.com/a/40030.html

相关文章:

  • Gurobi 并行计算的一些问题
  • Rk3568驱动开发_点亮led灯代码完善(手动挡)_6
  • 博客系统笔记总结 2( Linux 相关)
  • 集合与反射
  • 计算机视觉(opencv-python)入门之常见图像处理基本操作(待补充)
  • 如何使用Java爬虫按关键字搜索VIP商品实践指南
  • Vue 3 搭建前端模板并集成 Ant Design Vue(2025)
  • seasms v9 注入漏洞 + order by注入+​information_schema​解决方法
  • 【三维分割】LangSplat: 3D Language Gaussian Splatting(CVPR 2024 highlight)
  • 面试基础---深入解析 AQS
  • 爬虫获取 t_nlp_word 文本语言词法分析接口:技术实现与应用实践
  • Apache Commons Chain 与 Spring Boot 整合:构建用户注册处理链
  • 在虚拟机CentOS安装VMware Tools
  • 大白话css第二章深入学习
  • linux ununtu安装mysql 怎么在my.cnf文件里临时配置 无密码登录
  • 智能控制基础应用-C#Codesys共享内存实现数据高速交互
  • 地理数据可视化:飞线说明(笔记)
  • 机器学习--(随机森林,线性回归)
  • 为AI聊天工具添加一个知识系统 之124 详细设计之65 人类文化和习俗,即文化上的差异-根本差异 之2
  • 二十三种设计模式详解
  • python编写liunx服务器登陆自动巡检脚本
  • Windows 11【1001问】通过UltraISO软碟通制作Win 11系统安装U盘
  • ubuntu服务器安装VASP.6.4.3
  • 【论文笔记】ClipSAM: CLIP and SAM collaboration for zero-shot anomaly segmentation
  • 强化学习概览
  • 江协科技/江科大-51单片机入门教程——P[1-3] 单片机及开发板介绍
  • Redis缓存淘汰算法——LRU
  • Vue3 中如何实现响应式系统中的依赖收集和更新队列的解耦?
  • Qt——使用QtConcurrent::run开启的线程,程序退出后仍在后台运行的解决方法(QFutureWatcher监视线程)
  • SQL笔记#复杂查询