如何更改CSS的時間變換

我試圖做出懸停顯示一個箭頭，並一直使用如何更改CSS的時間變換

transform: translateY(3px);

它的工作一按下動畫按鈕，但需要舉行按鈕完成動畫。有沒有辦法設置動畫的速度，因此它不必被持有？我有一個版本的按鈕，只是用這種方式工作的新聞，但我猜箭頭代碼設置的翻譯時間是干涉。

箭頭和出版社HTML：

<button class="button-press-arrow"><span>Press Arrow</span></button>

箭頭和出版社CSS：

button { 
    position: relative; 
    width: 50%; 
    height: 55px; 
    border-radius: 5px; 
    font-size: 20px; 
    cursor: pointer; 
    outline: none; 
    border: none; 
    text-align: center; 
    overflow: hidden; 
    text-decoration: none; 
    padding: 15px; 
    color: white; 
} 
.button-press-arrow { 
    background-color: #f4511e; 
    box-shadow: 0 5px #e09a84; 
    transition: all 0.5s; 
    cursor: pointer; 
    margin: 5px; 
} 

.button-press-arrow span { 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    transition: 0.5s; 
} 

.button-press-arrow span:after { 
    content: '\00bb'; 
    position: absolute; 
    opacity: 0; 
    top: 0; 
    right: -20px; 
    transition: 0.5s; 
} 

.button-press-arrow:hover span { 
    padding-right: 25px; 
} 

.button-press-arrow:hover span:after { 
    opacity: 1; 
    right: 0; 
} 
.button-press-arrow:active{ 
    box-shadow: 0 2px #e09a84; 
    transform: translateY(4px); 
}

來源

2017-04-04 natem1270

你可以提供一個工作片斷？ –

最好是用JavaScript來做到這一點。創建一個類.button-active

.button-active { 
    box-shadow: 0 2px #e09a84; 
    transform: translateY(4px); 
}

，並用JavaScript添加類按鈕被點擊

<script> 
$(".button-press-arrow").click(function() { 
    $(".button-press-arrow").addClass("button-active"); 
}); 
</script>

來源

2017-04-05 00:14:31

我想我明白這個問題的時候。如果您希望在用戶放開按鈕後繼續播放動畫，那麼您必須使用javascript來完成此操作。

沒有jQuery的依賴，像

var element = document.getElementsByClassname('button-press-arrow')[0] 
element.addEventListener('mousedown', function() { 
    element.className += 'animation-class-name' 
    setTimeout(timeInMilliseconds, function() { 
    element.className = 'button-press-arrow' 
    } 
}

應該做的伎倆。

來源

2017-04-05 00:19:14

不可能只使用CSS，但您可以通過JS在mousedown上添加一個類，然後爲transitionend事件設置事件偵聽器，並在轉換完成後刪除該類。

減慢了示例中的過渡。

var button = document.getElementById('button'); 
 

 
button.addEventListener('transitionend',function() { 
 
    this.classList.remove('press'); 
 
}) 
 

 
button.addEventListener('mousedown',function(e) { 
 
    this.classList.add('press'); 
 
})

button { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 55px; 
 
    border-radius: 5px; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    outline: none; 
 
    border: none; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    text-decoration: none; 
 
    padding: 15px; 
 
    color: white; 
 
} 
 

 
.button-press-arrow { 
 
    background-color: #f4511e; 
 
    box-shadow: 0 5px #e09a84; 
 
    transition: transform 1s; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
} 
 

 
.button-press-arrow span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    transition: 0.5s; 
 
} 
 

 
.button-press-arrow span:after { 
 
    content: '\00bb'; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    right: -20px; 
 
    transition: 0.5s; 
 
} 
 

 
.button-press-arrow:hover span { 
 
    padding-right: 25px; 
 
} 
 

 
.button-press-arrow:hover span:after { 
 
    opacity: 1; 
 
    right: 0; 
 
} 
 

 
.button-press-arrow:active { 
 
    box-shadow: 0 2px #e09a84; 
 
} 
 

 
.press { 
 
    transform: translateY(8px); 
 
}

<button id="button" class="button-press-arrow"><span>Press Arrow</span></button>

來源

2017-04-05 00:39:06

如何更改CSS的時間變換

回答

相關問題