2016-05-26 12 views
0

Ich habe Flüssig-Feuer installiert. Stellen Sie alles auf. Und es funktioniert zwischen 2 Dateien im Vorlagenordner.Ember - flüssiges Feuer - transitions.js

transitions.js

export default function(){ 
    this.transition(
    this.fromRoute('test1'), 
    this.toRoute('test2'), 

    this.use('toRight'), 
    this.reverse('toLeft') 
); 
} 

router.js

Router.map(function() { 

    this.route('test1', function() {}); 
    this.route('test2', function() {}); 

}); 

application.hbs

{{liquid-outlet}} 

test1.hbs

<h1>test1</h1> 
<br> 
{{#link-to 'test2'}} test 2 {{/link-to}} 

test2.hbs

<h1>test2</h1> 
<br> 
{{#link-to 'test1'}} back to test 1 {{/link-to}} 

Dies funktioniert gut. Ich bekomme einen schönen Diaeffekt zwischen den 2 Seiten.

Aber wenn ich test2 in einen Ordner verschiebe, egal was ich mache, verlinken die Seiten, aber es gibt keinen schönen Übergang.

Ich habe den folgenden Code versucht:

transitions.js

export default function(){ 
    this.transition(
    this.fromRoute('test1'), 
    this.toRoute('cakes.test2'), 

    this.use('toRight'), 
    this.reverse('toLeft') 
); 
} 

router.js

Router.map(function() { 
    this.route('test1', function() {}); 


    this.route('cakes', function() { 
     this.route('test2', function() {}); 
    }); 

}); 

test1.hbs

<h1>test1</h1> 
<br> 
{{#link-to 'cakes.test2'}} test 2 {{/link-to}} 

test2.hbs

<h1>test2</h1> 
<br> 
{{#link-to 'test1'}} back to test 1 {{/link-to}} 

Die Seiten ändern sich, so dass der Link funktioniert - und Sie können die URL Kuchen/Test2 auch im Browser besuchen. Aber es gibt keinen schönen Folienübergang.

Antwort

1

Sie können keine spezifischen Übergangsanimationen zwischen verschiedenen Ebenenrouten definieren.

Was Sie tun können, ist einen Übergang zwischen Route test1 und Kuchen zu definieren, da sie auf der gleichen Ebene sind.

this.transition(
    this.fromRoute('test1'), 
    this.toRoute('cakes'), 

    this.use('toRight'), 
    this.reverse('toLeft') 
); 

Dies würde aktiviert dann die Animation, wenn Sie von test1 Weg gehen zu cakes.test2