CSS Transition on conditional block

@Benjy1979 wrote:

Hi,

If I have something like:

 {{#if @category.categoryIsOpen}}
<li class="section1_furniture"> 
     <h3 class="instruction">{{this.instruction}}</h3>
     {{#if @showInstructionText}}
  
        <h3 class="next-step-instruction">
            <NextStepComponent 
                @placeholderText="{{this.nextstep_text}}"
                @onNextStep={{@onNextStep}}
                @category={{@category}}
                >
            </NextStepComponent>
        </h3>
    {{/if}}
     {{#each this.furniture as |furniture|}}
        <button class="section1-furniture-item" {{on "click" (fn @insertFurnitureItem furniture)}}>
            <div class="imgcontainer">
                <img class="furniture-image" 
                    title="{{furniture.id}}" 
                    src="{{root-url}}assets/arp/page_images/{{furniture.label_url}}"/> 
            </div>
            <div class="summary captionblock">
                <span class="label_image">{{furniture.caption}}</span>
            </div>
        </button>
     {{/each}}
</li>

{{/if}}

The whole block is conditional on @category.categoryIsOpen being truthy.

What is the generally accepted Ember.js way I can apply a CSS transition on the opacity as Ember.js shows it (to stop it ‘clunking’ into view)?

Posts: 2

Participants: 2

Read full topic