javascript - Google卡的 "Flip and Grow"效果

Question

我一直在研究如何像 Google 卡片一样创建翻转和增长效果(点击任意卡片):

http://www.google.com/landing/now/#cards/restaurant-reservations

我找到的所有资源都是关于翻转一张正面和背面大小相同的卡片，但这不是我要找的。

我们将不胜感激任何反馈。

Answer 1

这里发布的两个答案都是很好的通用 css flippers，但它们没有解决问题的核心，即“谷歌是如何做到的？”。问题是谷歌缩小并因此混淆了他们的代码，这使得很难准确地说出发生了什么，但使用 DOM 检查器你可以获得一个非常基本的想法。这是摘要:

• 构建一个“克隆”div，其中包含前子 div 和后子 div，但默认情况下是隐藏的。将它的 css transition 属性设置为 ~.5seconds，这样它所做的任何移动都会被动画化。
• 当用户点击网格中的卡片时，设置克隆使其与点击卡片的位置/尺寸相同，将点击卡片的内容复制到前面的子元素中并将其设置为可见
• 隐藏原来点击的卡片，visibility:hidden
• 此时，您现在在完全相同的位置有了最初点击的卡片的克隆，但没人能分辨
• 将克隆 div 的顶部、左侧、高度和宽度的 css 设置为预先计算好的屏幕居中尺寸，同时设置前/后子项的 transform:rotateY()
• 此时，div 似乎正在抬起、翻转并移动/调整大小到屏幕中心。留下一个空位，因为原来的卡片还在那里，但 visibility:hidden 允许它占用空间而不显示其内容
• 设置了一个点击处理程序，以便当用户点击克隆卡片外部时，top,left,height,width,transform:rotateY() css 将重置为原始值，使其飞回原位.
• 然后克隆再次隐藏，原始卡片可见

演示: http://jsfiddle.net/jwhazel/AaU6v/11/

(在 Chrome 中开发，其他浏览器可能需要一些 vendor 前缀)

HTML

---

    <div class="cards">Generic Tile Card</div>

    <div id="cardClone">
        <div id="cloneFront">cardclone front</div>
        <div id="cloneBack">cardclone back</div>
    </div>

CSS

---

body {
    position: relative;
    font-family:Helvetica, Arial, Sans-serif;
    text-align:center;
}
.cards {
    margin:30px;
    width:200px;
    height:200px;
    background-color:#59A3FF;
    cursor:pointer;
    display:inline-block;
    overflow:hidden;
}
img {
    display:block;
    width:80%;
    height:auto;
    margin:0 auto
}
#cardClone {
    position:fixed;
    display:none;
    margin:30px;
    width:200px;
    height:200px;
    -webkit-transition:.6s;
    transition:.6s;
    -webkit-transform-style::preserve-3d;
    transform-style:preserve-3d;
    z-index:99;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
#cloneFront, #cloneBack {
    backface-visibility: hidden;
    width:100%;
    height:100%;
    position:absolute;
    -webkit-transition:.6s;
    transition:.6s;
    overflow:hidden;
}
#cloneFront {
    z-index:100;
    background-color:#59A3FF;
    transform: translatez(0);
}
#cloneBack {
    transform:rotateY(-180deg);
    z-index:101;
    background-color:#aaa;
}

Javascript

---

//Cache the clone since we have to select it a couple of times
$clone = $('#cardClone');

//Set a global for the card we just clicked so we can track it
$lastelement = "";

//Set up an object for last clicked element so we know where to return to on collapse
lastelement = {
    'top': 0,
        'left': 0,
        'width': 0,
        'height': 0
};

//Set a flag to determine the current flip state of our clone
cloneflipped = false;


//Bind a handler to the clone so we can detect when the transition is done
$('#cardClone').on("transitionend", function (e) {
    if (e.target === e.currentTarget) {
        if (e.originalEvent.propertyName == 'top') {

            //Toggle the clone state
            cloneflipped = !cloneflipped;

            //Detect if our clone has returned to the original position and then hide it
            if (!cloneflipped) {
                $($lastelement).css('opacity', 1);
                $($clone).hide();
            } else {
                //Need to dynamically alter contents of the clone rear AFTER it animates? Do it here
                //$('#cloneBack').html('hi');
            }
        }
    }
});


$(".cards").click(function () {
    if (!cloneflipped) {
        //Cache clicked card
        $lastelement = $(this);

        //Store position of this element for the return trip
        //[hack: subtract 30 due to the margin of .cards in this demo]
        var offset = $lastelement.offset();
        lastelement.top = offset.top - 30 - $(document).scrollTop();
        lastelement.left = offset.left - 30;
        lastelement.width = $lastelement.width();
        lastelement.height = $lastelement.height();

        //BONUS: lets check to see if the clicked card is further to the left or the right of the screen
        //This way we can make the animation rotate inwards toward the center, google doesn't do this
        var rotatefront = "rotateY(180deg)";
        var rotateback = "rotateY(0deg)";
        if ((lastelement.left + lastelement.width / 2) > $(window).width() / 2) {
            rotatefront = "rotateY(-180deg)";
            rotateback = "rotateY(-360deg)";
        }


        //Copy contents of the clicked card into the clones front card
        $clone.find('#cloneFront').html($lastelement.html());


        //Show the clone on top of the clicked card and hide the clicked card
        //[hack: using opacity for hiding here, visibility:hidden has a weird lag in win chrome]
        $clone.css({
            'display': 'block',
                'top': lastelement.top,
                'left': lastelement.left
        });
        $lastelement.css('opacity', 0);

        //Need to dynamically alter contents of the clone rear BEFORE it animates? Do it here
        //$('#cloneBack').html('hi');

        //Flip the card while centering it in the screen
        //[hack: we have to wait for the clone to finish drawing before calling the transform so we put it in a 100 millisecond settimeout callback]
        setTimeout(function () {
            $clone.css({
                'top': '40px',
                    'left': '40px',
                    'height': '400px',
                    'width': $(document).width() - 140 + 'px'
            });
            $clone.find('#cloneFront').css({
                'transform': rotatefront
            });
            $clone.find('#cloneBack').css({
                'transform': rotateback
            });
        }, 100);
    } else {
        $('body').click();
    }
});


//If user clicks outside of the flipped card, return to default state
$('body').click(function (e) {
    if (cloneflipped) {
        if (e.target === e.currentTarget) {
            //Reverse the animation
            $clone.css({
                'top': lastelement.top + 'px',
                    'left': lastelement.left + 'px',
                    'height': lastelement.height + 'px',
                    'width': lastelement.width + 'px'
            });
            $clone.find('#cloneFront').css({
                'transform': 'rotateY(0deg)'
            });
            $clone.find('#cloneBack').css({
                'transform': 'rotateY(-180deg)'
            });
        }
    }
});