transition: 过渡
transition 什么时候生效的
元素从一种样式变成另一种样式时的平滑过渡效果。在这种情况下，transition会在元素样式发生更改时立即生效，
tranform
一般transition 要搭配transform
translate
scale 旋转
rotate 旋转
使用rotate属性可以在原图基础上进行旋转
/* 在原图的基础上，顺时针旋转45度角 */
transform: rotate(45deg);
/* 在原图的基础上，顺时针旋转半圈 */
transform: rotate(0.5turn);
改变变形原点
变形原点的位置，会影响到具体的变形行为
默认情况下，变形的原点在盒子中心，你可以通过transform-origin来改变它
transform-origin: center; /* 设置原点在盒子中心 */
transform-origin: left top; /* 设置原点在盒子左上角 */
transform-origin: right bottom; /* 设置原点在盒子右下角 */
transform-origin: 30px 60px; /* 设置原点在盒子坐标 (30, 60) 位置 */
叠加使用transform
可以一次性设置多种变形效果
/* 先旋转45度，再平移(100,100) */
transform: rotate(45deg) translate(100px, 100px);
/* 先平移(100, 100)，再旋转45度 */
transform: translate(100px, 100px) rotate(45deg);
注意：旋转会导致坐标系也跟着旋转，从而可能影响到后续的变形效果
transition
过渡和动画无法对所有的CSS属性产生影响，能够产生影响的只有数值类属性，例如：颜色、宽高、字体大小等等
transition: 过渡属性 持续时间 过渡函数 过渡延迟
-
过渡属性
针对哪个css属性应用过渡。例如填写
transform，则表示仅针对transform属性应用过渡。若填写
all或不填写，则表示针对所有css属性都应用过渡 -
持续时间
css属性变化所持续的时间，需要带上单位。例如
3s表示3秒，0.5s或500ms均表示500毫秒 -
过渡函数
本质是css属性变化的贝塞尔曲线函数，通常直接使用预设值：
ease-in-out：平滑开始，平滑结束linear：线性变化ease-in：仅平滑开始ease-out：仅平滑结束 -
过渡延迟
书写规则和持续时间一样，表示过渡效果延迟多久后触发，不填则无延迟
案例
实现下拉菜单效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 100%;
list-style: none;
}
.menu {
width: 200px;
height: 50px;
background: #409eff;
color: #fff;
line-height: 50px;
margin: 0 auto;
margin-top: 50px;
text-align: center;
cursor: pointer;
position: relative;
}
.sub-menu {
background: #ddebfd;
font-size: 14px;
line-height: 35px;
color: #333;
padding: 10px 0;
position: absolute;
width: 100%;
}
</style>
<style>
/* 在这里完成作业 */
.sub-menu {
transform: scaleY(0);
transition: all 0.5s;
transform-origin: center top;
}
.menu:hover .sub-menu {
transform: scaleY(1);
}
</style>
</head>
<body>
<div class="menu">
<h2>下拉菜单</h2>
<ul class="sub-menu">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</div>
<script>
</script>
</body>
</html>
手风琴效果
方法:
- 给每个h2添加点击事件
- 点击事件,判断自身有没有高度,有高度啥都不干,没高度设为150px
- 同时将其他的submenu的高度设为0,隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
.desc {
color: #666;
font-size: 14px;
text-align: center;
margin: 1em 0;
}
.menu-container {
width: 200px;
margin: 50px auto;
background: #434a50;
color: #fff;
line-height: 1.5;
}
.menu h2 {
padding: 10px 20px;
cursor: pointer;
}
.sub-menu {
background: #565c63;
}
.sub-menu li {
font-size: 14px;
padding: 8px 0 8px 30px;
}
</style>
<style>
.sub-menu {
border-radius: 5px;
height: 0;
overflow: hidden;
transition: 1s;
}
</style>
</head>
<body>
<p class="desc">本效果需要用到JS</p>
<p class="desc">为降低复杂度，子菜单高度固定为150px</p>
<p class="desc">
因为如果高度为auto，无法产生过渡效果，必须通过一些特别的技巧才能解决
</p>
<div class="menu-container">
<div class="menu">
<h2>菜单1</h2>
<ul class="sub-menu">
<li>菜单1-1</li>
<li>菜单2-2</li>
<li>菜单3-3</li>
<li>菜单4-4</li>
</ul>
</div>
<div class="menu">
<h2>菜单2</h2>
<ul class="sub-menu">
<li>菜单2-1</li>
<li>菜单2-2</li>
<li>菜单2-3</li>
<li>菜单2-4</li>
</ul>
</div>
<div class="menu">
<h2>菜单3</h2>
<ul class="sub-menu">
<li>菜单3-1</li>
<li>菜单3-2</li>
<li>菜单3-3</li>
<li>菜单3-4</li>
</ul>
</div>
<div class="menu">
<h2>菜单4</h2>
<ul class="sub-menu">
<li>菜单4-1</li>
<li>菜单4-2</li>
<li>菜单4-3</li>
<li>菜单4-4</li>
</ul>
</div>
</div>
<script>
let h2 = document.querySelectorAll('.menu h2');
for (let i = 0; i < h2.length; i++) {
h2[i].onclick = handle
}
function handle() {
let ul = this.nextElementSibling;
if (ul.clientHeight) {
ul.style.height = 0;
} else {
ul.style.height = '150px';
}
let subs = document.querySelectorAll('.sub-menu');
for (let i = 0; i < subs.length; i++)
if (subs[i] !== this.nextElementSibling) {
subs[i].style.height = 0;
}
}
</script>
</body>
</html>
