pop,shift 细节问题
如果本来是一个空数组,删除后,返回值为undefined
let a=[] a.shift() //undefined
css渐变显示
See the Pen <a href='https://codepen.io/973782523/pen/dyGOoLg'>dyGOoLg</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.递归
const rangOf = (a, b) => {
if (a === b) {
return [a]
} else {
let numbers = rangOf(a, b - 1);
numbers.push(b);
return numbers
}
};
console.log(rangOf(10, 15));
// [ 10, 11, 12, 13, 14, 15 ]
代码风格
计算属性
function getKey(k) {
return `a key name${k}`
}
let obj = {
age: 12,
[getKey('aaa')]: false
};
obj[getKey('333')] = true;
console.log(obj);
//{ age: 12, 'a key nameaaa': false, 'a key name333': true }
const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
mayTheFourth: 4,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
mayTheFourth: 4,
};
照片折纸效果
See the Pen <a href='https://codepen.io/973782523/pen/rNxGWwv'>rNxGWwv</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.动画期间隐藏滚动条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 9
- 9
- 9
- 9
- 9
- 9
- 9
- 9
- 9
- 9
- 10
=============
.bbb{
width: 200px;
max-height: 200px;
background-color: red;
transition:max-height 1.2s ease-in-out;
overflow: auto;
animation: hide-scroll 1s backwards;
}
@keyframes hide-scroll {
from{
max-height: 0;
overflow:hidden;
}
to{
max-height: 200px;
overflow:hidden;
}
}
自动尺寸使用css过渡
angular/js版
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
export class OneComponent implements OnInit, AfterViewInit {
private count = false;
constructor() {
}
// 隐藏
collapse(element) {
// 内容的高度
let sectionHeight = element.scrollHeight;
// 禁止使用css 过渡转化
// let elementTransition = element.style.transition;
// element.style.transition = '';
requestAnimationFrame(function() {
element.style.height = sectionHeight + 'px';
// element.style.transition = elementTransition;
requestAnimationFrame(function() {
element.style.height = 0 + 'px';
});
});
}
//展示
public height;
expandSection(element) {
let h=this.height;
var sectionHeight = element.scrollHeight;
element.style.height = sectionHeight + 'px';
requestAnimationFrame(function() {
element.style.height = sectionHeight + 'px';
requestAnimationFrame(function() {
element.style.height = h + 'px';
});
});
}
ngOnInit(): void {
}
public b;
public boleans = true;
clickOne() {
if (this.boleans) {
this.collapse(this.b);
this.boleans=false;
} else {
this.expandSection(this.b);
this.boleans=true;
}
}
ngAfterViewInit(): void {
this.b = document.querySelector('.collapsible');
this.height = this.b.scrollHeight;
}
}
.container {
border: 3px solid #ffeb3b;
margin:0 auto;
max-width: 300px;
border-radius:3px;
.section{
overflow: hidden;
transition:height 0.3s ease-out;
height:auto;
border:2px solid #ffeb3b;
}
}