Tag: css-transitions
Nabin Nepal (Starx) css-transitions css3 jquery
July 8, 2013

CSS Transitions Not working after toggleClass()

85Ryan’s Question:

85Ryan85Ryan

I created a toggle-menu, like the DEMO.

I add a css transition effect for div.nav-menu , and i used max-height:0; to max-height:480px; .

When click the menu toggle to show the menu, the transition was working good. But when I click the menu toggle to hide the menu again the transition didn’t work now.

What did I did wrong?

StarxStarx

You are wrong about CSS Transitions. They do not animate when you add or remove class, It will only animate when you change the CSS properties. And You are directly adding and removing classes.

Here is your solution:

$( '.menu-toggle' ).on( 'click', function() {       
    if(nav.hasClass('toggled-on')) { 
         menu.css('maxHeight', 0); 
       //^ Here is changed the 'max-height` first so that the 
       //  Transition animation will trigger first
    } 
    nav.toggleClass( 'toggled-on' ); //Then only I toggled the class
} );

Updated Fiddle

Nabin Nepal (Starx) css css-transitions css3 hover
February 27, 2013

CSS3 – Transition

Question by Wanny Miarelli

Wanny MiarelliWanny Miarelli

I ran into a little problem with CSS.
I’m following a book to learn CSS3 and I just discovered the function Transition.
So I decided to make an attempt to try and I can not figure out where I’m wrong, I hope you can help me.

This is my Index.html file

<html>
<head>
    <title>My Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<div class="box"></div>
<div class="ssin"></div>

</body>
</html>

nothing special ! and this is the main.css

.box{
    height: 200px;
    width: 200px;
    background-color: #333333;
}

.ssin{
    height: 200px;
    width: 200px;
    background-color: red;
}

.box:hover .ssin{
    width: 500
}

i think the problem is around here …

.box:hover .ssin{
    width: 500;
}

if I go with the mouse. box does not happen anything, but instead should, theoretically, change the width of ssin

Can you help me ( i know its stupid, but am learning )

Sorry for my bad eng.

Thank you

Answer by Jeremy T

Jeremy TJeremy T

In the HTML you have posted there, ssin is not inside box. .box:hover .ssin selects something with the class ssin inside box. I believe what you want here is the adjacent sibling selector: .box:hover + .ssin

Answer by Starx

StarxStarx

Since you are trying to look into CSS3 Transition, I will assume you are trying to increase the size of the box. SO, your markup is slightly wrong. The ssin should be inside the .box

<div class="box">
    <div class="ssin"></div>
</div>

And add the transition css to your code

.ssin {
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
            transition: all 0.5s linear;
}
Nabin Nepal (Starx) css css-transitions css3
April 15, 2012

CSS3 move then animate

Question by Paul Thompson

Paul ThompsonPaul Thompson

I am trying to animate my pages using css3 transitions.
I need to be able to move an element and then animate using css3.
For instance move a hidden div off the screen and then animate it back on the screen.
Sounds strange I know but I have simplified my explanation and really do need this functionality. So in the code below I want to move the element 400px left and then animate it to 0. So….no animation move 400px, add CSS3 transition class and animate to 0px. Hope I have explained it ok…thanks for any help.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My test page</title>
<style type="text/css">
    .box{
        height:100px;
        width:100px;
        background-color:green;
        position:absolute;
        top:100px;
    }
    .animator{
        -webkit-transition: all 1.5s ease;
        -moz-transition: all 1.5s ease;
        transition: all 1.5s ease;
    }
</style>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.box').css({left:'400px'});
        $('.box').addClass('animator');
        $('.box').css({left:'0px'});

    });

</script>
</head>
<body>
<div class="box">1</div>
</body>
</html>

Answer by Starx

StarxStarx

I think this should do

$('.box').animate({left:'400px'}).fadeIn().addClass('animator').animate({left:'0px'});
...

Please fill the form - I will response as fast as I can!