Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how to “ease” an input search when the width changes ? ( css3 )

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #195824
    maketroli
    Participant

    I have an input search that I am trying to get ease with a transition css3 effect.

    Every time that the user focus on that input, on the right hand will appear a Cancel button which is actually an icon to clean the input. Once that icon appears the width of the input changes, I want to ease the movement of that input because as you know the movement or the transition by default is so rough, I have this JSbin for you to see what I am doing and what I have so far.

    the situation begins here

            <ion-header-bar>
              <label>
                <input type="text" class="btnCancel"
                       placeholder="Sports and leagues finder..."
                       ng-model="query"
                       ng-focus="isSearchFocused=true"
                       ng-blur="isSearchFocused=false">
                <div ng-show="query" ng-click="query=''">
                  <i class="ion-close positive"></i>
                </div> -->
              </label>
              <button ng-show="isSearchFocused"
                      ng-click="query = ''">
                <i class="ion-close-circled"></i>
              </button>
            </ion-header-bar> 
    

    css

        .btnCancel {
          -webkit-transition : all 2s ease;
          transition         : all 2s ease;
        }
    

    this is with CodePen just in case

    #196210
    blackhiu
    Participant

    1) the background color are set to the wrong div
    2) should be :focus not :hover

    see if this help.
    http://jsfiddle.net/sng97cuv/

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.