前端笔记——触发transition过渡动画

要实现过渡动画的元素上有transition:width 2s;，要触发有过渡动画，就要使得它的css属性发生变化。

常见的使得css属性发生变化的方法有：

伪类触发——ele:hover{width:200px;}    input.focus{backgroud-color:blue;}

js触发——比如为元素添加click事件，事件函数内修改css属性：dom.style.width="300px"或者dom.classList.add("newClassName")使得添加的类中的属性覆盖之前的从而发生变化或者ele.className="newClassName"直接替换掉原来的类，但是要注意transition:all 3s;要写在新类中。