Topic: Input icon animation

demzl25 priority asked 2 years ago


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


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 priority 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


Dawid Wajszczuk staff answered 2 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • 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