製作一個簡單的選單動畫效果
阿新 • • 發佈：2018-11-09
CSS3過渡屬性
- 屬性 描述 CSS
transition 簡寫屬性，用於在一個屬性中設定四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。預設是 0。
transition-timing-function 規定過渡效果的時間曲線。預設是 “ease”。
transition-delay 規定過渡效果何時開始。預設是 0。
貝塞爾曲線用法
需用 transition-timing-function 來規定過渡曲線效果
linear 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。 ease 規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。 ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。 ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值 如：transition-timing-function: cubic-bezier(1,-0.87,0,1.59);
HTML DOM classList 屬性
語法
element.classList
方法
| 方法 | 描述 |
|---|---|
| add(class1, class2, …) | 在元素中新增一個或多個類名。如果指定的類名已存在，則不會新增 |
| contains(class) | 返回布林值，判斷指定的類名是否存在。可能值：true - 元素包已經包含了該類名false - 元素中不存在該類名 |
| item(index) | 返回類名在元素中的索引值。索引值從 0 開始。如果索引值在區間範圍外則返回 null |
| remove(class1, class2, …) | 移除元素中一個或多個類名。注意： 移除不存在的類名，不會報錯。 |
| toggle(class, true | false) 在元素中切換類名。第一個引數為要在元素中移除的類名，並返回 false。 如果該類名不存在則會在元素中新增類名，並返回 true。 第二個是可選引數，是個布林值用於設定元素是否強制新增或移除類，不管該類名是否存在。例如：移除一個 class: element.classList.toggle(“classToRemove”, false); 新增一個 class: element.classList.toggle(“classToAdd”, true);注意： Internet Explorer 或 Opera 12 及其更早版本不支援第二個引數。 |
下面是程式碼部分
HTML
<div class="text-center">
<h1 id="text" >前端學院<span id="underline"></span></h1>
<button class="btn" onclick="changeStyle()">切換樣式</button>
</div>
CSS
h1{
transition: color 0.2s linear;
-moz-transition: color 0.2s linear; /* Firefox 4 */
-webkit-transition: color 0.2s linear; /* Safari 和 Chrome */
-o-transition: color 0.2s linear; /* Opera */
}
span{
width: 0;
display: block;
/*邊框粗細顏色*/
border-bottom: 4px #1C86EE solid;
transition:width 0.5s;
margin: 0 auto;
}
.text{
/*過度完成後的文字顏色*/
color:#1C86EE;
}
.text-center{
text-align:center;
}
.underline{
/*下劃線長度*/
width:140px;
}
.btn{
margin-top: 60px;
outline-style:none;
background-color:white;
border-style:solid;
border-width:2px;
border-radius:10px;
font-size:26px;
}
JavaScript
var changed = false;
function changeStyle(){
if (changed == false) {
document.getElementById("underline").classList.add('underline');
document.getElementById("text").classList.add('text');
changed = true;
}else{
document.getElementById("underline").classList.remove('underline');
document.getElementById("text").classList.remove('text');
changed = false;
}
}