09-CSS过渡transition

CSS过渡transition

    • CSS过渡-Transitions
        • -过渡三要素
        • -过渡触发
        • [-transition-property 规定应用过渡的 CSS 属性的名称。](#-transition-property 规定应用过渡的 CSS 属性的名称。)
        • [-transition-duration 定义过渡效果花费的时间。默认是 0。](#-transition-duration 定义过渡效果花费的时间。默认是 0。)
        • [-transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。](#-transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。)
        • [-transition-delay 规定过渡效果何时开始。默认是 0。](#-transition-delay 规定过渡效果何时开始。默认是 0。)
        • -注意点
        • -过渡连写格式
        • -过渡连写注意点

CSS过渡-Transitions

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义。

要实现这一点,必须规定两项内容:

1.指定要添加效果的CSS属性

2.指定效果的持续时间。

CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性),何时开始 (设置 delay),持续多久 (设置 duration) 以及如何动画 (定义timing function,比如匀速地或先快后慢)。

-过渡三要素

​ 1.1必须要有属性发生变化

​ 1.2必须告诉系统哪个属性需要执行过渡效果

​ 1.3必须告诉系统过渡效果持续时长

-过渡触发

1、:hover 鼠标悬停触发

2、:active 用户单击元素并按住鼠标时触发

3、:focus 获得焦点时触发

4、@media触发 符合媒体查询条件时触发

5、点击事件 用户点击元素时触发

-transition-property 规定应用过渡的 CSS 属性的名称。

​ none 没有属性会获得过渡效果。

​ all 所有属性都将获得过渡效果。

​ property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

-transition-duration 定义过渡效果花费的时间。默认是 0。

​ time 规定完成过渡效果需要花费的时间(以秒或毫秒计)。 默认值是 0,意味着不会有效果。

-transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

​ linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。

​ ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。

​ ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。

​ ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。

​ ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。

​ cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

-transition-delay 规定过渡效果何时开始。默认是 0。

​ time 指定秒或毫秒数之前要等待切换效果开始

-注意点

​ 当多个属性需要同时执行过渡效果时用逗号隔开即可

​ transition-property: width, background-color;

​ transition-duration: 5s, 5s;

​ transition 是 transition-property, transition-duration,transition-timing-function,

​ transition-delay的速写形式,分别表示过渡属性,持续时间,时间曲线,过渡延迟

css 复制代码
div { 
    transition: <property> <duration> <timing-function> <delay>;
}
-过渡连写格式
css 复制代码
transition: 过渡属性 过渡时长 运动速度 延迟时间;
/*transition: width 5s linear 0s,background-color 5s linear 0s;*/
/*transition: background-color 5s linear 0s;*/
/*transition: width 5s,background-color 5s,height 5s;*/
-过渡连写注意点

​ 2.1和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可

​ 2.2连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素

​ 2.3如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为

​ transition:all 0s;

复习

1.什么是伸缩盒/弹性盒? *********************************** 核心概念:容器 弹性元素 交叉轴 主轴

给元素设置个display为flex,该元素成为弹性盒,子元素也就是弹性元素永远沿着主轴方向排列,主轴方向默认为水平方向

交叉轴方向默认为垂直方向,主轴和交叉轴可以通过flex-direction 更改排列方向 容器属性:

display:flex 开启伸缩盒

flex-direction:row(默认值) column row-reverse column-reverse 更改主轴排列方向

flex-wrap:设置父容器空间不足时候是否换行显示 默认不换行 nowrap(默认值) wrap(换行)wrap-reverse(换行反转)

flex-flow:flex-direction 和 flex-wrap 简写

justify-content 设置弹性元素在主轴对齐方式

flex-start

flex-end

center

space-around

space-between

space-evenly

strecth

align-items 设置弹性元素在交叉轴对齐方式

flex-start

flex-end

center

baseline

strecth

align-content 设置弹性元素多行对齐方式

flex-start

flex-end

center

space-around

space-between

space-evenly

strecth 元素属性:

order 更改弹性元素排列顺序

flex-grow 当父容器空间有剩余是否占满 默认不占满 默认值0

flex-shrink 当父容器空间不足时候是否进行等比例压缩 默认是等比例压缩 默认值1

设置为0表示不进行等比例压缩

flex-basis 给弹性元素设置宽度 默认auto 优先级高于width

flex:flex-grow flex-shrink flex-basis 简写

align-self 设置弹性元素自身在交叉轴对齐方式

相关推荐
sasaraku.22 分钟前
serviceWorker缓存资源
前端
RadiumAg1 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo1 小时前
ES6笔记2
开发语言·前端·javascript
yanlele2 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子3 小时前
React状态管理最佳实践
前端
烛阴3 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子3 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码4 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw54 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app