<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* @at-root {
.current{
width: 200px;
height: 200px;
transform:rotate(360deg);
margin: 160px auto;
background-color: red;
}
} */
/*选择器类型及权重:
选择器 权重
标签选择器 0001
class类选择器 0010
属性选择器 0010
伪类选择器 0010
伪元素选择器 0010
id选择器 00100
行内样式 1000 */
.current{
width: 200px;
height: 200px;
transform:rotate(360deg);/*动画效果,谁做动画给谁*/
margin: 160px auto;
background-color: red;
}
#current1{ /*必须想方法给普通的div设置样式,否则删除类后就看不到了*/
width: 200px;
height: 200px;
/*要想方法将后来添加的类的背景覆盖掉id的这里的样式,权重id比类选择器高得多,因此把这部分拿出来到 div 里设置,*/
margin: 160px auto;
}
div{
background-color: pink;
transition: all .5s;
/*transition属性写在最初的样式里,而不是放在结束的样式里,
即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition,浏览器就会负责以动画展示从一个样式到另一个样式。*/
}
</style>
</head>
<body>
<div id="current1"></div>
<!-- 设置完后这里无class,即为完整状态,即可解决问题,transiton是给所有想动的,tranform是给有动画效果 -->
</body>
<script src="../jquery.min.js"></script>
<script>
$(function(){
$('#current1').click(function(){
/*1.原本div是#current1和div的聚合体的样子,如果属性冲突则id覆盖标签,也就是说一开始div所具备的属性:
background-color: pink;
transition: all .5s;
width: 200px;
height: 200px;
margin: 160px auto; 切换类后由无到有,由有到无仅变化了两个属性:
通过id绑定到div,添加类名只是变化
1. transform:rotate(360deg);
2. background-color: red;
*/
$(this).toggleClass('current')
})
})
</script>
</html>