explode transition

jeffreybiles · Feb 6, 2016 · 5a31c96 · 5a31c96
1 parent abb5235
commit 5a31c96
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/app/templates/monsters/monster/show.hbs b/app/templates/monsters/monster/show.hbs
@@ -1,10 +1,10 @@
 {{#liquid-bind model class="liquid-monster" as |newMonster|}}
   <div class="monster-card">
     <span class="name">{{newMonster.name}}</span>
-    <span class="pull-right">Level: {{newMonster.level}}</span>
+    <span class="pull-right level">Level: {{newMonster.level}}</span>
 
 
-    <img src={{newMonster.imageUrl}} />
+    <img src={{newMonster.imageUrl}} class="monster-image" />
     <br>
     ${{newMonster.price}}
   </div>

diff --git a/app/transitions.js b/app/transitions.js
@@ -18,6 +18,17 @@ export default function(){
   )
   this.transition(
     this.hasClass('liquid-monster'),
-    this.use('toRight', {duration: 3000})
+    this.use('explode', {
+      pick: '.level',
+      use: 'toUp'
+    },{
+      pickNew: '.name',
+      use: 'toRight'
+    },{
+      pickOld: '.name',
+      use: 'toLeft'
+    }, {
+      use: ['fade', {duration: 500}]
+    })
   )
 }