diff --git a/src/generators/dom/visitors/Element/addTransitions.js b/src/generators/dom/visitors/Element/addTransitions.js
index 526a9df6cc..42e46e36b6 100644
--- a/src/generators/dom/visitors/Element/addTransitions.js
+++ b/src/generators/dom/visitors/Element/addTransitions.js
@@ -22,7 +22,7 @@ export default function addTransitions ( generator, block, state, node, intro, o
block.builders.outro.addBlock( deindent`
${name}.run( ${name}.t, 0, function () {
- detachNode( ${state.name} );
+ ${generator.helper( 'detachNode' )}( ${state.name} );
${block.component}.fire( 'outro.end', { node: ${state.name} });
if ( --${block.alias( 'outros' )} === 0 ) ${block.alias( 'outrocallback' )}();
${name} = null;
@@ -63,7 +63,7 @@ export default function addTransitions ( generator, block, state, node, intro, o
block.builders.outro.addBlock( deindent`
${outroName} = ${wrapTransition}( ${state.name}, ${fn}, ${snippet}, false, null );
${outroName}.run( 1, 0, function () {
- detachNode( ${state.name} );
+ ${generator.helper( 'detachNode' )}( ${state.name} );
${block.component}.fire( 'outro.end', { node: ${state.name} });
if ( --${block.alias( 'outros' )} === 0 ) ${block.alias( 'outrocallback' )}();
});
diff --git a/test/runtime/samples/transition-js-if-block-bidi/_config.js b/test/runtime/samples/transition-js-if-block-bidi/_config.js
new file mode 100644
index 0000000000..d4cd3982f0
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-bidi/_config.js
@@ -0,0 +1,40 @@
+export default {
+ test ( assert, component, target, window ) {
+ global.count = 0;
+ let now = 0;
+ let callback;
+
+ window.performance = { now: () => now };
+ global.requestAnimationFrame = cb => callback = cb;
+
+ component.set({ visible: true });
+ assert.equal( global.count, 1 );
+ const div = target.querySelector( 'div' );
+ assert.equal( div.foo, 0 );
+
+ now = 300;
+ callback();
+ assert.equal( div.foo, 0.75 );
+
+ component.set({ visible: false });
+ assert.equal( global.count, 1 );
+
+ now = 500;
+ callback();
+ assert.equal( div.foo, 0.25 );
+
+ component.set({ visible: true });
+ now = 700;
+ callback();
+ assert.equal( div.foo, 0.75 );
+
+ now = 800;
+ callback();
+ assert.equal( div.foo, 1 );
+
+ now = 900;
+ callback();
+
+ component.destroy();
+ }
+};
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-block-bidi/main.html b/test/runtime/samples/transition-js-if-block-bidi/main.html
new file mode 100644
index 0000000000..31ffd90bc1
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-bidi/main.html
@@ -0,0 +1,19 @@
+{{#if visible}}
+
foo bidi
+{{/if}}
+
+
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-block-intro-outro/_config.js b/test/runtime/samples/transition-js-if-block-intro-outro/_config.js
new file mode 100644
index 0000000000..f267ce2ad2
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-intro-outro/_config.js
@@ -0,0 +1,62 @@
+export default {
+ test ( assert, component, target, window ) {
+ let now = 0;
+ let callback;
+
+ window.performance = { now: () => now };
+ global.requestAnimationFrame = cb => callback = cb;
+
+ component.set({ visible: true });
+ let div = target.querySelector( 'div' );
+ assert.equal( div.foo, 0 );
+
+ now = 200;
+ callback();
+ assert.equal( div.foo, 0.5 );
+
+ now = 400;
+ callback();
+ assert.equal( div.foo, 1 );
+
+ now = 500;
+ callback();
+ assert.equal( div.foo, 1 );
+
+ component.set({ visible: false });
+ now = 600;
+ callback();
+ assert.equal( div.foo, 1 );
+ assert.equal( div.bar, 0.75 );
+
+ now = 900;
+ callback();
+ assert.equal( div.foo, 1 );
+ assert.equal( div.bar, 0 );
+
+ // test outro before intro complete
+ now = 1000;
+ component.set({ visible: true });
+ div = target.querySelector( 'div' );
+ callback();
+
+ now = 1200;
+ callback();
+ assert.equal( div.foo, 0.5 );
+
+ component.set({ visible: false });
+ now = 1300;
+ callback();
+ assert.equal( div.foo, 0.75 );
+ assert.equal( div.bar, 0.75 );
+
+ now = 1400;
+ callback();
+ assert.equal( div.foo, 1 );
+ assert.equal( div.bar, 0.5 );
+
+ now = 2000;
+ callback();
+
+ component.destroy();
+ }
+};
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-block-intro-outro/main.html b/test/runtime/samples/transition-js-if-block-intro-outro/main.html
new file mode 100644
index 0000000000..d752e63722
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-intro-outro/main.html
@@ -0,0 +1,27 @@
+{{#if visible}}
+ foo then bar
+{{/if}}
+
+
\ No newline at end of file
diff --git a/test/runtime/samples/transition-intro-js/_config.js b/test/runtime/samples/transition-js-if-block-intro/_config.js
similarity index 94%
rename from test/runtime/samples/transition-intro-js/_config.js
rename to test/runtime/samples/transition-js-if-block-intro/_config.js
index 18bd552663..50a427062f 100644
--- a/test/runtime/samples/transition-intro-js/_config.js
+++ b/test/runtime/samples/transition-js-if-block-intro/_config.js
@@ -18,6 +18,9 @@ export default {
callback();
assert.equal( window.getComputedStyle( div ).opacity, 1 );
+ now = 500;
+ callback();
+
component.destroy();
}
};
\ No newline at end of file
diff --git a/test/runtime/samples/transition-intro-js/main.html b/test/runtime/samples/transition-js-if-block-intro/main.html
similarity index 100%
rename from test/runtime/samples/transition-intro-js/main.html
rename to test/runtime/samples/transition-js-if-block-intro/main.html