Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-10576] iOS: animation causes transitioned element to swap children's order

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionCannot Reproduce
Resolution Date2012-09-05T15:18:51.000+0000
Affected Version/sRelease 2.1.1
Fix Version/sn/a
ComponentsiOS
Labelsapi
ReporterTim Poulsen
AssigneeSabil Rahim
Created2012-08-23T12:45:53.000+0000
Updated2017-03-09T22:17:17.000+0000

Description

Expected results

An animation on one component shouldn't affect another.

Actual results

Drop the following code into a new project and build for iOS. Click the second box to transition between its children. Then, click the first box. You'll see the "transition" box swap back to its original child. If you click it again, it will transition to the second child. So it's not that the transition has actually been fired by the click on the top box. It's more like the zIndex of the child elements has been swapped.
var win = Ti.UI.createWindow({
	backgroundColor:'#fff'
});
win.add(Ti.UI.createLabel({
	text:'Click transition box, then fade box',
	color:'#000',
	font:{
		fontSize:20,
		fontWeight:'bold'
	},
	height:'auto',
	width:'auto',
	top:10
}));
var box = function(color, whatsItDo) {
	// helper function for making colored boxes
	var bx = Ti.UI.createView({
		height:50,
		width:100,
		backgroundColor:color
	});
	bx.add(Ti.UI.createLabel({
		height:'auto',
		width:'auto',
		text: whatsItDo,
		color:'#fff',
		font:{
			fontWeight:'bold'
		}
	}));
	return bx;
};

// add some boxes
var box1 = box('red', 'fade out/in'),
	box2 = box('green', 'transition'),
	box3 = box('blue', 'transition'),
	selectedIndex = 0;
box1.top = 50;
win.add(box1);

// this container holds the two boxes you'll transition between
var container = Ti.UI.createView({
	width:'auto',
	height: 70,
	top: 120
});
container.add(box2);
container.add(box3);
win.add(container);

// event listener to fade out/in box 1
box1.addEventListener('click', function(){
	box1.animate({
		opacity:0,
		duration:2000
	}, function(){
		box1.animate({
			opacity:1,
			duration:2000
		});
	});
});

// event listener for transition effect
container.addEventListener('click', function(){
	if (selectedIndex%2 == 0) {
		container.animate({
			view:box2,
			transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT
		});
	}
	else {
		container.animate({
			view:box3,
			transition:Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT
		});
	}
	selectedIndex++;
});

win.open()

Code is a simplified version of one of the demos we do in training. See https://github.com/appcelerator-training/tcmd-code/tree/master/Finished_code/Lab340

Comments

  1. Sabil Rahim 2012-09-05

    Cannot be reproduced on master but can reproduce it on 2_1_X branch. Could be because of the change we made to the animation code (as part of moving it into BLOCK based code) on master. Marking ticket as invalid.
  2. Sabil Rahim 2012-09-05

    Tested on OSX 10.7.4 Xcode Version 4.4 (4F250) iOS Sim 5.0 and 4.3 git hash 2.2.0 (b782790d0487f6f75e9e098aff07bb3d46bd311c)from Sept 04,2012
  3. Lee Morris 2017-03-09

    Closing ticket as the issue cannot be reproduced.

JSON Source