From 0243eed41eddd5bde3a7ce0c6e2ae7313457b19b Mon Sep 17 00:00:00 2001 From: Stuart Knightley Date: Wed, 21 Mar 2012 14:27:43 -0700 Subject: Add scale animation back to youtube channel Masks animation error on Canary. Also looks cool. --- .../montage/ui/youtube-channel.reel/youtube-channel.html | 2 ++ .../montage/ui/youtube-channel.reel/youtube-channel.js | 11 +++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) (limited to 'node_modules/montage/ui') diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html index f40ccadb..848322e0 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html @@ -84,11 +84,13 @@ opacity: 0; visibility: hidden; + -webkit-transform: scale3d(0, 0, 1); -webkit-transition: all 0.5s ease-in-out; } .montage-youtube-channel-popup.show { opacity: 1; visibility: visible; + -webkit-transform: scale3d(1, 1, 1); } .montage-youtube-channel-close { diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js index 6cd43a3c..30920953 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -136,8 +136,15 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { if (this._shouldShowPopup) { this._positionPopup(); - this._element.classList.add("show"); - this._popupElement.classList.add("show"); + + // Fix for Canary where the thumbnail in the video doesn't + // change until the CSS transition has finished, so wait for + // it to change before starting the animation + var self = this; + window.setTimeout(function() { + self._element.classList.add("show"); + self._popupElement.classList.add("show"); + }, 50); if (window.Touch) { document.addEventListener('touchstart', this, false); } else { -- cgit v1.2.3