CODEWITHSUNDEEP
htmlcss
Alexander Solonik
Alexander Solonik

Reputation: 10230

Hiding an element after transition using CSS only

I have been trying to design a login form and the button requires a little transition effect. There is one complexity though.

Background: I originally copied this idea from here: original form.

Notice how there is no padding (left and right) on the main container, now in my demo it was critical to have padding left and this creates a problem (will explain further).

Now here's my demo:

My version of login form (don't be scared of the 108 lines of CSS code; I'll paste the code that pertains to my problem below).

So the code that's relevant to this problem is as follows.

The HTML code:

<button class="login-button"><span>SEND</span></button>

The CSS code:

.login-button{
    width: 100%;
    outline: none;
    border:none;    
    cursor: pointer;
    padding: 0;
    margin:0;
    transition:.3s;
}

.login-input , .login-button{
    height: 50px;
    line-height: 40px;
    transition:.3s;
}

.login-button span{
    display: block;
    background:red;
    height: 100%;
    width: 100%;
    left: 0;
    transition:.3s;
    position: relative;
}

.login-button span:before{
    content: 'ok';
    position: absolute;
    left: 100%;
    display: block;
}

.login-button:hover span:before{
    content: 'OK To go now';
    position: absolute;
    /*left: 0%;*/
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
}

Now if I go to the CSS styling for the main container:

I.E. 

 .main-login{
    min-width: 200px;
    max-width: 400px;
    background: #533e69;
    margin: 100px auto;
    text-align: center;
    overflow: hidden;
    box-shadow: 1px 1px 10px rgba(0,0,0,.2);
    padding: 0 20px;
}

and take off the padding, then the problem is solved and the transition looks perfect.

The problem

My requirements are such that I need that padding, so now what happens is when you hover over the button and the span element moves left:-100%, it's still visible in the main container.

Proposed solution

I would like it if this problem can be solved in CSS only as I don't really like cluttering my doc's with JS. So how about this.

I am new to CSS, so my solution may be less elegant:

When hovered over the button, the span overs left:-100% and than if the span can be set to display:none. Sounds simple, but my limited knowledge of CSS has got me stuck here.

Upvotes: 1

Views: 477

Answers (2)

maja
maja

Reputation: 18034

You need to set the background to be transparent. It's not possible for a transition to animate the display property.

Add this css code, and it should work:

.login-button:hover span{
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
    transition: 2s;
    background: rgba(1,1,1,0);
}

See your updated fiddle here.

Edit: I cleaned up the css a bit:

.login-button:hover span{
    transition: 0.3s;
    background: transparent;
}

Fiddle is here.

Upvotes: 2

Ajmal Jamil
Ajmal Jamil

Reputation: 829

Transition properties are comma delimited in all browsers that support transitions:

.nav a {
  -webkit-transition: color .2s, text-shadow .2s;
  /* And so on... */
}

Ease is the default, so you don't have to specify it. If you really want linear, you will need to specify it, i.e. -webkit-transition: color .2s linear, text-shadow .2s linear;

Or try this
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;

This is the link

Upvotes: 1

Related Questions