指尖上的记忆指尖上的记忆
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub
首页
  • 基础
  • Laravel框架
  • Symfony框架
  • 基础
  • Gin框架
  • 基础
  • Spring框架
  • 命令
  • Nginx
  • Ai
  • Deploy
  • Docker
  • K8s
  • Micro
  • RabbitMQ
  • Mysql
  • PostgreSsql
  • Redis
  • MongoDb
  • Html
  • Js
  • 前端
  • 后端
  • Git
  • 知识扫盲
  • Golang
🌟 gitHub

有时候需要改变元素的 margin width 等,又不想变化的很突兀,可以通过 transition 实现:

通过transition添加样式过渡:
'margin-left:0px;transition:margin-left .3s;';
'margin-left: calc((100% - '+that.respWidth+'px)/2);transition:margin-left .3s;';

transition 属性设置元素当过渡效果,四个简写属性为:

transition-property #指定CSS属性的name,transition效果
transition-duration #transition效果需要指定多少秒或毫秒才能完成
transition-timing-function #指定transition效果的转速曲线
transition-delay #定义transition效果开始的时候

注意: 始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。