animation,meteor,spacebars , How to animate enter and leave of MeteorJS {{#if}} block?


How to animate enter and leave of MeteorJS {{#if}} block?

Question:

Tag: animation,meteor,spacebars

The title really says it all. Given a template:

{{#if selection}}
    <div class="something">
        <p>To Animate</p>
    </div>
{{/if}}

how do I control enter and exit animations of .something?

Thanks.


Answer:

You have to create a template out of the DOM containing stuff to animate:

<templte name="somthing">
<div class="parentdiv">
{{#if selection}}
    <div class="something">
        <p>To Animate</p>
    </div>
{{/if}}
<div>
</template>

You can then use _ui_hooks

Template.something.onRendered(function() {

this.find('#task-list')._uihooks = {
      insertElement: function(node, next) {
        $(node).addClass('animate')
          .insertBefore(next);

        setTimeout( function () {
          $(node).removeClass('animte');
        }, 20);
      },
      removeElement: function (node) {
        $(node).addClass('animate')
          .on(EVENTS, function() {
            $(node).remove()
          });
      },
    }
});

So here your css class containing the animation is animate.


Related:


CSS rotate animation with pulse


html,css,animation,rotation,frontend
I am trying to make an animation using CSS. It should rotate an image and give it a pulse (something similar to Shazam's button animation). The following is my code. Image is rotating but if I add 'scale' to try and make it pulsate as well, it has a pulse...

XMLHttpRequest to Restivus API


javascript,meteor,xmlhttprequest,cross-domain,cors
I have got a problem when sending a cross domain XMLHttpRequest to a Restivus API. Here my code for the client side script: var xhrurl = 'http://example.com:3000/api/test'; var xhr = createCORSRequest('POST', xhrurl); xhr.withCredentials = true; xhr.setRequestHeader("Content-type","application/json"); xhr.setRequestHeader("X-User-Id",object.apiUser); xhr.setRequestHeader("X-Auth-Token",object.apiKey); xhr.send(); Here the function createCORSRequest function createCORSRequest(method, url) { var xhr =...

Use JSON file to insert data in database


javascript,json,mongodb,meteor,data
I'm using my JSON file like this to insert data in my collection : var content = JSON.parse(Assets.getText('test.json')); console.log('inserting...'); Profiles.insert({ user: id, data:content }; But I would like to have a "data's tree" like that : [ user: "rtegert23423131", firstname:"test", surname:"test2", // ... ] Not like that : [ user:...

JavaFX - how to get background color of Tab, Button, etc


java,animation,colors,javafx,background
Problem description: I can't get background of object in JavaFX. I don't mean Shapes, but normal Nodes like Buttons, Tabs and others. I don't know how to access to theirs background color. What I want? I am developing IDE and I want to run Color animation on tab with file...

Turning the Stripe Checkout into a Synch function


meteor,stripe-payments
I am trying to use wrapAsync for Stripe.charges call using Stripe Checkout, but I cant seem to get it working Client code Template.bookingPost2.events({ "click #accept": function(event, template){ event.preventDefault(); StripeCheckout.open({ key: 'public_key', amount: 5000, // this is equivalent to $50 name: 'Meteor Tutorial', description: 'On how to use Stripe ($50.00)', panelLabel:...

Meteor Iron Router not loading template


javascript,meteor,iron-router
I am trying to load templates using iron router and none of the templates for the routes load. The url will change when the items are clicked but the current page never changes. Lib/router.js - Router.configure({ // we use the appBody template to define the layout for the entire app...

CSS bouncing line loader animation


html,css,animation
Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction. This is my css @keyframes loader-animation { 0% {...

Eloquent Javascript: DOM Animation snippet


javascript,animation,dom,recursion,requestanimationframe
I'm trying to understand everything that is happening in this little code example in Eloquent Javascript: The Document Object Model (Chapter 13), but I'm not clear on where exactly the value for "time" is being passed into the animate() function before the function itself gets passed into requestAnimationFrame(). What exactly...

DB relationship: implementing a conversation


mongodb,meteor
I want to implement a simple conversation feature, where each conversation has a set of messages between two users. My question is, if I have a reference from a message to a conversation, whether I should have a reference the other way as well. Right now, each message has conversationId....

Creating meteor autoform w/ array of radio buttons


meteor,meteor-autoform
I'd like to build an autoform in meteor that presents user with a twelve radio buttons and records an entry for each of the 12 buttons. I can get the form working easily enough if I create 12 different buttons—see below, but I'm wondering if it is possible to create...

Turning an avatar into a 3rd person character


animation,unity3d
I just learned how easy it is to simply drag a 3rd person character controller prefab (from Unity's standard assets package) and drop it into the hierarchy. Using the WSAD and Space keys feels pretty natural, so I wondered if I could apply the same character controller to a customized...

Meteor - Requests randomly failing


meteor,request-cancelling
I have this weird problem where some requests fails randomly. I have no idea what is causing this behavior. Sometimes it is images not loading and sometimes it is ajax request (cfs/severtime or algolia-search) and some other times everything is fine. It also happen in local and online. Here are...

Android animations memory leak


android,animation
If I have infinite animation in activity and navigate away from activity, does it causes memory leak? Do I have to stop animation explicitly or is it somehow managed on framework level? What I mean by infinite animation: <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false" android:repeatCount="infinite"> <rotate android:duration="1000" android:interpolator="@android:anim/linear_interpolator" android:pivotX="50%" android:pivotY="50%"...

How to return value in Meteor.JS from HTTP.call “GET”


javascript,ajax,http,meteor,facebook-javascript-sdk
I'm writing a meteor method, which should return a Facebook response for HTTP.call on graph api, but HTTP.call has only a callback function to show error/response, so I can't take this data outside, and Method can not return any value. Here's my method code: loadUserFBEvents: function () { var accessToken...

Meteor/MongoDB limiting the result


mongodb,meteor
I am trying to find all documents and publish at most 5 from the results. Following this section of the MongoDB doc, I am trying to do this: Meteor.publish('teams', function () { return Teams.find().limit(5); }); Yet, in the server console, I get an exception: Exception from sub teams id Pm6jKL8Sv3FSDSTfM...

Meteor: Passing Session values from client to server


javascript,node.js,session,meteor
I am using the following code on the client side to set the Session variable: Template.download.events({ 'click button': function() { var clientid=Random.id(); UserSession.set("songsearcher", clientid); console.log(clientid + UserSession.get("songsearcher")); I am using the following pacakge: Meteor-User-session, which will explain the use of UserSession in place of Session. Now, this works fine. But...

Meteor collections: how to connect to different collections referring to each other?


meteor,meteor-helper,meteor-collections
I have two collections: Contracts = new Mongo.Collection('contracts'); Reminders = new Mongo.Collection('reminders'); These are structured in the database more or less like this: Contracts: { "id": "4432234", "contract": "C-42432432", "description": "Description of contract", "counterpart": "Company name", "status": "awarded" }, etc. Reminders: { "name": "Contract expiring", "type": "expiring", "contract": "C-42432432", "reminderDate":...

Convert ng-click to Blaze in meteoric


angularjs,meteor,ionic-framework,meteor-blaze,meteoric
I used ng-click as below in ionic: <div class="list"> <a class="item item-icon-right nav-clear" href="#/app/list1" ng-click="closeMenu()"> <i class="icon ion-ios7-paper"></i> Item 1 </a> .... </div> know I want to use Meteor with Meteoric. I don't know how to convert ng-click to Blaze version. Please guide me. I didn't find anything about this...

Meteor: onRendered doesn't get fired again after second render iron-route


javascript,meteor,iron-router
I have an iron-router route: Router.route('/profiel/bewerken', { subscriptions: function () { return Meteor.subscribe('currentUser'); }, action: function () { if (this.ready()) this.render('profielBewerken', { to: 'container', data: function () { return Meteor.user(); } }); else this.render('profielBewerken', { to: 'container', data: { loading: true } }); } }); It waits until the subscription...

MeteorJS Blaze.getData() occasionally returns undefined


meteor,meteor-blaze
I'm currently rendering bootstrap modals on my webpage using MeteorJS's "renderWithData" method to load each template when it's needed. I'm running into an issue where my helper methods which access the data in the modal using "Blaze.getData()" will occasionally return undefined and I'm unsure how to fix that. The only...

Meteor: Load scss files in a certain order


meteor,sass
I'd like to know how to load scss files in order when using Meteor. Not using Meteor, I would make something like application.scss and load .scss files in order so that stylesheets loaded later can depend on mixins/variables loaded earlier. And then I'd load application.scss in my template. application.scss @import...

Use a “months” array to perform calculations for each month in a for loop


javascript,arrays,meteor,meteor-helper
I have a mongo collection to store "projects", each document stores a project with different calculations for each month of the year a_jan : 10, a_feb : 20, a_mar : 25, a_apr : 70 ... b_jan : 30, b_feb : 10, b_mar : 20, b_apr : 70 ... c_jan :...

Roku animation using animated sprites, how to create the tedious xml


xml,animation,sprite-sheet,roku,brightscript
I made a simple java script code to create the sprite sheet xml for the sprite animation in roku written in brightscript. Is there an easier way to just pass in the sheet and let it figure out the dimensions of the frame? That would be cool. I learnt about...

TypeError: Cannot read property 'slice' of null


meteor,meteor-autoform,meteoric
I am using autoform in my project and getting this error when I open the form Not sure if this is because of any versions or dependency, my autoform is not working and I am getting this error, I have the screenshot and the schema code, form code below, template...

Meteor.users.find() - how to filter by group in alanning:roles package


meteor,mongodb-query,roles,groups
I'm trying to make an admin section on my website. The admin can go to the admin page and see a table of the users in his group. I only want to publish a the users that are in that admin's group. E.g. he is in the group ['soccer'] but...

Animate removal of list items with css


css,angularjs,css3,animation,css-animations
I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list? My css: .messages-active.messages { max-height: 50px; } .messages { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition:...

Access binaries inside docker


ubuntu,meteor,docker
I am using Meteor and Meteur Up package to push a bundle to server. It uses docker. The problem is that I cannot access graphicsmagick or imagemagick from inside a docker to use it in my app. However it is installed on the server and I can access it when...

Custom transition iOS (Push/Pop)


ios,objective-c,animation,uiviewcontroller,custom-transition
I created a custom zoom-in transition when pushing a new viewController, and it used to work perfectly fine. Now I want to create a zoom-out effect when popping the viewController, and even-thought the final state is correct, the animation is wrong since I don't know how to identify if it...

Snap SVG .animate callback fires immediately


javascript,jquery,animation,svg,snap.svg
I am trying to pass a set of arguments to an animate function within Snap SVG including a callback function. However, the callback (in this case is to remove the element) fires immediately on click and not after the animation has completed. As it is now, the element is removed...

Textures loading error(JS Animation)


javascript,animation,pixi
Intruduction: I am writing a simple animation with JavaScript and PIXI.js. How it's working: I paint textures in new places and delete it in old places by every step. Problem: Sometimes i get these results(some textures are not displayed and CPU loaded on 50%) http://itmages.ru/image/view/2649716/a5ae37b5 But if i updating the...

jQuery component stop working when routing


meteor
I'm using Bootstrap Select in Meteor (using this package if relevant: https://github.com/amrali/bootstrap-select-meteor), but everytime I switch page and go back (IronRouter) the select has reverted to a standard HTML select. I initialize it in the rendered callback but it's only called once and breaks when navigating: Template.temp.rendered = function() {...

Manual slide-in animation using delta time


c#,animation,unity3d
I'm creating a simple slide-in animation for my game. The box is shown at the bottom with character dialog. The animation is supposed to look as follows: A square slides in from the left, then waits a bit, then expands to its full width. The box is made using Unity's...

Get json values from key-value pair without passing keys in meteor


javascript,json,mongodb,meteor
i am using keys to get the values from json in meteor. My json is in this format. { "_id" : "SXTJBs7QLXoyMFGpK", "Brand" : { "value" : "Nike" }, "Material" : { "value" : "Cooton" }, "Price" : { "value" : "67484" }, "ComboId" : { "value" : "y23" },...

If element moves, how to animate that movement with css or jquery?


jquery,css,animation,movement
I got some elements, and when an event is triggered one of them is removed or added to the DOM, when this happens the rest of the elements moves around to find their right place on the DOM, what I want is to animate that movement. Any ideas? I would...

How do I do an analog of a page scope in variable in Meteor?


meteor,meteor-helper
I have this Meteor layout: <template name="layout"> {{> toolbar }} <div class="container"> {{> yield}} </div> </template> Router.configure({ layoutTemplate: 'layout' }); I want to have the toolbar argument display dynamic content based on the page. I could do that by using some reactive variables. However, what happens when more than one...

Cannot connect to MongoDB inside a template


meteor
I'm still a newbie when it comes to Meteor. The following code works, I get the list: <body> <ul> <li>Test</li> {{#each members}} {{> MembersList}} {{/each}} </ul> </body> <template name="MembersList"> <li>{{name}}</li> </template> To use iron:router in need to put this in another page with {{yield}}, so I need to put it...

How can i make a jQuery animation loop on infinite, after it finish?


jquery,loops,animation
I have a jQuery animation, i have a flying monkey that has to rotate from left to right and from right to left, is working fine but i have to make the monkey loop. Right now i have improvised, i have made several divs into each other that rotate after...

CKeditor outputs Html. How to format it for displaying properly, not just lame html?


javascript,html,css,meteor,ckeditor
I am using CKeditor, and this is my code: ...othercode.. <div class="input-field col s12"> <textarea id="textarea1" class="materialize-textarea"></textarea> <label for="textarea1">Body of the Post</label> </div> <input type="submit" name="Submit" id="sub"> </form> </div> </div> </div> {{else}} <div>You are not logged in.</div> {{/if}} <script> CKEDITOR.replace('textarea1'); </script> In Javascript, I use the same id to extract...

Insert data in collection at Meteor's startup


javascript,json,meteor,data,startup
I would like to insert data at Meteor's startup. (And after from a JSON file) At startup, I create a new account and I would like to insert data and link it to this account once this one created. This is the code that creates the new account at startup:...

Disabling tail.sh for specific server ( or environment )?


javascript,meteor
While testing my meteor app i keep receiving emails saying my application went offline. How does i disable this feature for an specific environment or hostname ( for instance, "localhost" ) ?...

Pass router parameters in Router.go()


meteor,iron-router
I have a route to display user parameters: admin/users/details/:userID In the template associated with this route I have "Back" button. What is the best way to pass "return route path" to Router.go() and access it later in Template.AdminUsersDetailsDetailsForm.events({ "click #form-back-button": function(e, t) { e.preventDefault(); Router.go(PARAM.NAME, {}); } ...

What is cursor?


meteor
In discover meteor, posts: function() { return Posts.find(); } is used, not this: posts: function() { return Posts.find().fetch(); } I tried function below, it also works, and can realtime update. What is cursor exactly? And What is the different of above two functions?...

Meteor - Multiple data contexts with Iron Router


meteor,iron-router
I just started using Meteor and Iron Router. Here I'm trying to use two data contexts but appearantly I'm doing it wrong. I've googled it but it doesn't seem this is a very common problem, but I guess it got to be possible to pass on two or more data...

SceneKit + Collada + animation


objective-c,animation,blender,scenekit,collada
I am trying to use Apple's SceneKit in order to load a model from Blender in Collada (dae) format, then apply animation on it from another Collada file, just like Apple did in their Banana example. I can do this with their models and animation files, however, if I open...

Nested animation in iOS: combine animated and non-animated code in animateWithDuration?


ios,objective-c,animation,nested,animatewithduration
Nested animation In short the nested animation allows to run 2 independent animations simultaneously. But what to do if I have a complex code which consists of both animated and non-animated code? I mean the following situation: [UIView animateWithDuration:... animations:^{ ...//code1 - with animation ...//code2 - also contains code which...

QtQuick2 - QML - create infinite moving line animation


javascript,animation,qml,infinite-scroll,qtquick2
Does anyone know how to implement linear animation, for example like in progress bars, where few of lines moving infinite in the bar from left to right or any other way? I'm going to use only QtQuick2 primitives and without any additional C++ components, glad to see any answers that...

How do I make a slight modification to a package locally in Meteor?


javascript,meteor
I'm using a package that loads Font Awesome from a CDN. However, the CDN used is pretty terrible, often stalling or timing out, so I'd like to switch it out. The source code is incredibly simple, and looking through it I found this: style.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'; Switching to a different...

Meteor: group documents and publish an object


javascript,meteor
I would like to know how to group documents according to a condition, and publish to the client. Suppose I have the following documents: [ { name: 'John', createdAt: some_date_value_1 }, { name: 'Jane', createdAt: some_date_value_2 }, { name: 'Bob', createdAt: some_date_value_1 }, { name: 'Jenny', createdAt: some_date_value_2 } ]...

Why is animation-fill-mode not working for this specific element?


css,animation,css-animations
I'm using CSS keyframe animations to create some simple animated text and animation-fill-mode:forward is working for most of it to keep the properties after the animation fires except for the video element. It goes back to it's previous state. I cannot find anything that would be causing it. Here's a...

Stop fadin/fadeout event jquery


javascript,jquery,animation,event-handling
I have a dive that flashs once on click. If you press the button multiple times it will keep flashing until the click count has been executed. I would like to so then if the user was to click the button multiple times, it would stop flashing after the last...