單擊按鈕上的Flash輸入文本框背景

我有一個輸入文本框和一個按鈕元素。我想讓文本框背景顏色淡入淡出並點擊一下按鈕。單擊按鈕上的Flash輸入文本框背景

HTML

<input type="text"> 
<button>Click</button>

CSS

input{ 
    transition: background-color 0.1s ease-in-out 0s; 
} 
input:target{ 
    background-color: red; 
}

我無法弄清楚如何觸發按鈕點擊動畫。

這裏是所期望的效果

http://i.imgur.com/3CNllvP.gif

編輯一個GIF本來我問了一下完成這不JavaScript的，但現在看來，這是不可能的。

來源

2017-02-14 John Baker

這很可能與像**元素來完成的：選擇{背景： #FFFFFF;/*一些顏色代碼* /} **和**元素：focus {border：1px solid rgb（255,255,255）/ *某些顏色代碼 - 也可以使用輪廓效果* /} **，但是，他們可能使用JS在按鈕被點擊時選擇它。 –

請嘗試的jsfiddle該工作示例：https://jsfiddle.net/9j826bcb/5/

我用CSS3動畫在這裏。

@keyframes highlight { 
    50% {background-color: green;} 
    100% { background-color: white; } 
} 

input { 
    outline: 0; 
} 

input.active { 
    background-color: white; 
    animation-name: highlight; 
    animation-duration: .1s; 
} 

input.final { 
    border:1px solid green; 
} 

input.final::selection { 
    background: green; 
} 

input.final::-moz-selection { 
    background: green; 
}

而且，請注意，您必須包括jQuery的到你的項目源，並觸發「點擊」動作：

$('button').on('click', function() { 
    setTimeout(function() { 
    $('input').addClass('active'); 
    }, 100); 

    $('input').removeClass('active').addClass('final').trigger('focus').select(); 
});

來源

2017-02-14 01:24:14 Igor

單擊一個類，並使用與該類關聯的animation來執行閃光效果。

不知道爲什麼，這是不是在我的評論工作，但這裏有一個codepen - http://codepen.io/anon/pen/BpMpYe

var button = document.getElementById('button'), 
 
    input = document.getElementById('input'), 
 
    flashClass = 'flash'; 
 

 
button.addEventListener('click',function() { 
 
    input.classList.add(flashClass); 
 
}); 
 

 
input.addEventListener('animationend',function() { 
 
    this.classList.remove(flashClass); 
 
});

.flash { 
 
    animation: flash .15s; 
 
} 
 

 
@keyframes flash { 
 
    50% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: transparent; 
 
    } 
 
}

<input id="input" type="text"> 
 
<button id="button">Click</button>

來源

2017-02-14 00:56:04

單擊按鈕上的Flash輸入文本框背景

回答

相關問題