实现效果：根据点击显示或隐藏面板
image.png
创建Animation类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
margin: 10px auto;
width: 500px;
}
.slide .title {
cursor: pointer;
background-color: #bfa;
line-height: 50px;
text-align: center;
}
.slide .panel {
height: 260px;
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="box">
<div class="slide">
<div class="title">Click Me ｡◕ᴗ◕｡</div>
<div class="panel"></div>
</div>
<div class="slide">
<div class="title">Click Me｡◕ᴗ◕｡</div>
<div class="panel"></div>
</div>
<div class="slide">
<div class="title">Click Me｡◕ᴗ◕｡</div>
<div class="panel"></div>
</div>
</div>
<script>
class Animation {
constructor(el) {
this.isShow = true
this.el = el
this.defaultHeight = this.height
}
get height() {
//获得的高度是字符串 200px
return parseInt(window.getComputedStyle(this.el).height)
}
set height(h) {
this.el.style.height = h + "px"
}
hide(callback) {
this.isShow = false
let id = setInterval(() => {
this.height--
if (this.height <= 0) {
clearInterval(id)
callback && callback()
}
}, 10)
}
show(callback) {
this.isShow = true
let id = setInterval(() => {
this.height++
if (this.height >= this.defaultHeight) {
clearInterval(id)
callback && callback()
}
}, 10)
}
}
let el = document.querySelector(".content")
let a = new Animation(el)
a.hide(()=>{
console.log("finish")})
</script>
</body>
</html>
Box和Pandel类
class Box {
constructor(el) {
this.el = el
this.titles = this.el.querySelectorAll(".title")
this.panels = [...this.el.querySelectorAll(".panel")].map(
item => new Panel(item)
)
console.log(this.panels);
this.bindEvent()
}
bindEvent() {
this.titles.forEach((title, i) => {
title.addEventListener("click", () => {
this.action(i)
console.log(i);
})
})
}
action(i) {
Panel.hideAll(Panel.filter(this.panels,i))
this.panels[i].show()
}
}
class Panel extends Animation {
static hideAll(items) {
items.forEach(item => item.hide())
}
static filter(items, i) {
return items.filter((item, index) => index !== i)
}
}
let el = document.querySelector(".box")
let box = new Box(el)
动画队列的控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
margin: 10px auto;
width: 500px;
}
.slide .title {
cursor: pointer;
background-color: #bfa;
line-height: 50px;
text-align: center;
}
.slide .panel {
height: 260px;
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="box">
<div class="slide">
<div class="title">Click Me ｡◕ᴗ◕｡</div>
<div class="panel"></div>
</div>
<div class="slide">
<div class="title">Click Me｡◕ᴗ◕｡</div>
<div class="panel"></div>
</div>
<div class="slide">
<div class="title">Click Me｡◕ᴗ◕｡</div>
<div class="panel"></div>
</div>
</div>
<script>
class Animation {
constructor(el) {
this.isShow = true
this.el = el
this.defaultHeight = this.height
}
get height() {
//获得的高度是字符串 200px
return parseInt(window.getComputedStyle(this.el).height)
}
set height(h) {
this.el.style.height = h + "px"
}
hide(callback) {
this.isShow = false
let id = setInterval(() => {
if (this.height <= 0) {
clearInterval(id)
callback && callback()
}
this.height--
}, 5)
}
show(callback) {
this.isShow = true
let id = setInterval(() => {
//会导致多次点击一直增加高度
//this.height++
if (this.height >= this.defaultHeight) {
clearInterval(id)
callback && callback()
}
this.height++
}, 5)
}
}
class Box {
constructor(el) {
this.el = el
this.titles = this.el.querySelectorAll(".title")
this.panels = [...this.el.querySelectorAll(".panel")].map(
item => new Panel(item)
)
console.log(this.panels);
this.bindEvent()
}
bindEvent() {
this.titles.forEach((title, i) => {
title.addEventListener("click", () => {
this.action(i)
console.log(i);
})
})
}
action(i) {
Panel.hideAll(Panel.filter(this.panels, i), () => {
this.panels[i].show()
})
}
}
class Panel extends Animation {
static num = 0
//隐藏所有面板
static hideAll(items, callback) {
//计数器大于0表示当前有动画正在执行
if (Panel.num > 0) return
items.forEach(item => {
Panel.num++
item.hide(() => {
Panel.num--
})
})
callback && callback()
}
//过滤掉当前面板
static filter(items, i) {
return items.filter((item, index) => index !== i)
}
}
let el = document.querySelector(".box")
let box = new Box(el)
</script>
</body>
</html>
网友评论