SLDS - Transition Slow - How to fade in

One of the problems I see with your code is in this line:

<button onclick="$('[id$=no_api_key]').removeClass('sods-transition-hide').addClass('slds-transition-show'); return false;">try me</button>

removeClass('sods-transition-hide') should be removeClass('slds-transition-hide')

If that doesn't completely solve your issue, I noticed something further above in your code that you might want to also check. I'm not totally certain about this, but it's worth mentioning.

<div id="no_api_key" class="slds-transition-hide" transition="slow">

Presumably for a motion, you need a "time token" someplace in the form of $duration-slowly that specifies it's time duration in multiples of 100 milliseconds. An example given in the documentation is $duration-slowly 0.4s. They do not list $duration-slow.

I'm not entirely certain there is a transition="slow" in the slds css system and if there were, you might need to set the token for it, in order to use it in that manner. Once you make the first correction, if what you have doesn't work, you'll quickly discover if using something like $transition-slowly has a default that's sufficient for your needs.

I think it important to add that the documentation states:

A “grid of time” creates consistent rhythm. Animation is defined as multiples of a base grid.

With the way the above is stated, it makes me question whether a grid might not be required for css animations (and other slds css for that matter) to work properly. After all, it is based on the expectation that the grid system will be on the page, something I don't see in yours.

Hope this helps get you moving towards a working solution.

Here's an example of a lightning component fading out:

pageMessage.cmp

<aura:component >
    <aura:attribute name="message" type="String"/>
    <aura:attribute name="severity" type="String"/>
    <aura:attribute name="fadeTimeout" type="Integer" default="5000"/>
    <aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>
    <div class="slds-notify_container">
        <div aura:id="alert" class="slds-notify slds-notify--alert slds-theme--alert-texture" role="alert">
            <c:button class="slds-button slds-button--icon-inverse slds-notify__close" press="{!c.close}">
                <c:svg class="slds-button__icon" svgPath="/resource/SLDS100/assets/icons/utility-sprite/svg/symbols.svg#close"/>
                <span class="slds-assistive-text">Close</span>
            </c:button>
            <span class="slds-assistive-text">Info</span>
            <h2>{!v.message}</h2>
        </div>
    </div>
</aura:component>

pageMessageController.js

({
    doneRendering : function(component, event, helper) {
        window.setTimeout($A.getCallback(function() {
            if(component.isValid()) {
                $A.util.addClass(component, "slds-transition-hide");
            }
        }), component.get("v.fadeTimeout"));
    }
})

pageMessage.css

.THIS.slds-transition-hide {
    transition: opacity 1s;
}

This won't work out of the box for you if you don't have the SVG component from the Lightning Design System site. The core of this is you need to specify the transition time by adding a declaration to .slds-transition-hide. More on that here. The definition of .slds-transition-hide is just one line, opacity: 0. By adding the transition line to your component, you're saying that any change in opacity for elements that have this class should be spread over one second. $A.util.addClass adds the class to the element after 5000ms, and it fades out over one second. Hopefully this gives you enough to go on to make your element fade in.