CSS: make a property ignore the transition time without using jQuery

I recently got into this problem, I have a ‘div’ element that is set to have:

#add-wallet-div {
   width: 10px;
   height: 10px;
   background: blue;
   border-radius: 10px;
   opacity: 0;
   transition: 1s;
}

and when I add to this element the ‘toggled’ class it expand:

#add-wallet-div.toggled {
   height: 300px;
   width: 200px;
   opacity: 1;
}

The problem here is that I want the opacity to go from a value of 0 to a value of 1 instantaneously, but since I have to set transition time to 1s this isn’t happening.

I saw a couple of solution to this problem but all of them use jQuery, which I’d prefer not to use.

I also tried this:

#add-wallet-div {
   width: 10px;
   height: 10px;
   background: blue;
   border-radius: 10px;
   opacity: 0;
}

#add-wallet-div.toggled {
   height: 300px;
   width: 200px;
   transition: 1s;
}

#add-wallet-div.toggled2 {
   opacity: 1;
}

But nothing changed.

Answer

I just found a way to solve this:

    #add-wallet-div {
       width: 10px;
       height: 10px;
       background: blue;
       border-radius: 10px;
       opacity: 0;
       transition-duration: 1s;
       transition-property: width, height;
    }

    #add-wallet-div.toggled {
       height: 300px;
       width: 200px;
       opacity: 1;
    }

Basically using the ‘transition-property’ property I tell on wich proprties the transition should have an effect.

Here’s a more in-depth explanation.