Topic: Input icon animation
Hi,
How to add animation to input icon (when you click on input the icon change from grey to blue color)?
Expected behavior https://streamable.com/ov06ql
Actual behavior https://streamable.com/eei5uw
Resources (source snippet) https://mdbootstrap.com/snippets/standard/demzl25/3658693#css-tab-view
Thanks,
Damjan
Hi,
You can try something like this:
document.querySelectorAll('.form-outline').forEach((form)=>{
const input = form.querySelector('.form-control')
const icon = form.querySelector('i')
input.addEventListener('focusin',()=>{
icon.classList.add('active')
})
input.addEventListener('focusout',()=>{
icon.classList.remove('active')
})
})
Here is the snippet: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3669260#js-tab-view.
Keep coding,
Dawid
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: Pc
- Browser: Chrome 97.0.4692.99
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Dawid Wajszczuk staff commented 2 years ago
Hi. Can you also share the code of the example from the first video? (In the snippets there is option to choose jQuery from the technology select).
demzl25 pro commented 2 years ago
Here is the snippet of the example from the first video: [https://mdbootstrap.com/snippets/jquery/demzl25/3666101#css-tab-view]
And here is also link to the website where is the code of the example from the first video: https://www.regresija-hipnoza.si/kontakt
Thanks, Damjan