Метеор: шаблон рендеринга jQuery с анимацией при нажатии

Question

После нажатия на заголовок класса .join в шаблоне authJoinType, я хотел бы отобразить (ввести в действие) шаблон joinForm. Кроме того, я пытаюсь анимировать joinForm, как это (см., Как он исчезает и движется вверх). http://jsfiddle.net/blackhawx/kMxqj/13/

Должен ли я вставить шаблон joinForm внутри шаблона authJoin?

HTML:

<template name="authJoin"> 
{{> authJoinType}} // this template displays two boxes with labels 'publisher' and 'reader' 
{{> joinForm}} // this to fade into view when either box is clicked 
</template> 


<template name="authJoinType"> 
<div class="container join-type"> 
    <div class="row"> 


    <div class="col-md-6"> 
     <a href="#"> 
     <div class="join-type-heading" value="reader">Reader</div></a> 
    </div> 

    <div class="col-md-6"> 
     <a href="#"> 
     <div class="join-type-heading" value="publisher">Publisher 
     </div></a> 
    </div> 

</div> 
</div> 
</template> 


<template name="joinForm"> 

    <div class="container"> 
     <div class="row-fluid"> 
      <div class="col-md-6"> 
       <div class="wrapper-auth"> 
       <form class="form-join"> 
        <input type="text" class="form-control" id="firstName" placeholder="first name" required="" autofocus="" /> 
        <input type="text" class="form-control" id="lastName" placeholder="last name" required="" autofocus="" /> 
        <input type="text" class="form-control" id="email" placeholder="email address" required="" autofocus="" /> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

client.js для события щелчка (это хорошо)

Template.authJoinType.events({ 
'click div.join-type-heading': function(e, tmpl) { 
//function to go here.... 
} 
}); 

Я попытался добавить HTML в joinForm JQuery на события мыши, но это не работает. например

$('#container').append('<div>....</div>'); 

Я использую mizzao: самозагрузки-3 и mizzao: JQuery-щ.

Answer 1

Этот код удаляет класс, который не щелкнут, а затем отображает соединение в форме с анимацией. Выглядит SLICK !! Я объединил информацию от пользователей sbking и user3557327. Благодарю вас обоих! Единственное, что нужно запомнить, - это сдвинуть правый div (второй col-md-6) влево, если он щелкнут.

client.js

Template.authJoinType.rendered = function() { //fade out non selected div 
    $('div.join-type-heading').on('click',function() { 
    $('.join-type-heading').not(this).each(function() { 
    $(this).fadeOut('slow', function(complete){ 
      $('.join-form').addClass('show'); //references the .show class in css file 
     }); 
    }); 
    }); 
}; 

.css

.join-form { 
margin-top: 20px; 
opacity: 0; 
position: relative; 
top: 40px; 
transition: opacity 600ms, top 400ms; 
} 
.join-form.show { 
opacity: 1; 
top: 0px; 
} 
.join-type-heading { 
padding-top: 40px; 
padding-bottom: 40px; 
margin-top: 50px; 
background-color: #0088cb; 
text-align: center; 
font-size: 30px; 
color: #ffffff; 
letter-spacing: 2px; 
} 

HTML:

<template name="authJoin"> 
{{> authJoinType}} 
{{> joinForm}} 
</template> 


<template name="authJoinType"> 
<div class="container join-type"> 
    <div class="row"> 

    <div class="col-md-6"> 
    <a href="#"> 
    <div class="join-type-heading" value="reader">Reader</div></a> 
    </div> 

    <div class="col-md-6"> 
    <a href="#"> 
    <div class="join-type-heading" value="publisher">Publisher</div></a> 
    </div> 

    </div> 
</div> 
</template> 


<template name="joinForm"> 
<div class="container join-form"> //.join-form class is added when div in authJoinType is clicked and other div fades out. 
    <div class="row-fluid"> 
     <div class="col-md-6"> 
      <div class="wrapper-auth"> 
      <form class="form-join"> 
       <input type="text" class="form-control" id="firstName" placeholder="first name" required="" autofocus="" /> 
       <input type="text" class="form-control" id="lastName" placeholder="last name" required="" autofocus="" /> 
       <input type="text" class="form-control" id="email" placeholder="email address" required="" autofocus="" /> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 
</template> 

Answer 2

Вы должны визуализировать шаблон с регулярными рулями включают как {{> joinForm}} анимацию и поместите в оказанном обратном вызове мультипликационного шаблона:

Template.joinForm.rendered = function() { 
    var container = this.$('.container'); 
    container.css({ 
    opacity: 0, 
    position: 'relative' 
    top: 20 
    }).animate({ 
    opacity: 1, 
    top: 0 
    }, 500); 
}; 

Обратите внимание, что вы можете также обрабатывать анимацию с помощью CSS, который обычно лучше вариант. Например, если вы добавляете класс join-form к контейнеру:

.join-form { 
    opacity: 0; 
    position: relative; 
    top: 20px; 
    transition: opacity 500ms, top 500ms; 
} 

.join-form.show { 
    opacity: 1; 
    top: 0 
} 

Template.joinForm.rendered = function() { 
    this.$('.join-form').toggleClass('show'); 
}; 

Answer 3

Вы можете создать переменную сеанса с именем showForm, проверить, правда ли это, чтобы показать форму и установить его истинна на событие щелчка:

<template name="authJoin"> 
    {{> authJoinType}} 
    {{#if showForm }} 
     {{> joinForm}} 
    {{/if}} 
</template> 

Template.authJoin.helpers({ 
    showForm: function() { 
     return Session.equals('showForm', true); 
    } 
}); 

Template.authJoinType.events({ 
    'click div.join-type-heading': function(e, tmpl) { 
     Session.set('showForm', true); 
    } 
}); 

Я не уверен в анимационной части, но, вероятно, делает то же самое, как ваш пример в оказанной функции будут работать:

Template.joinForm.rendered = function() { 
    $(this.firstNode).animate({opacity: 1, top:0}, 1000); 
}