Question

我希望card动画的顶部像底部一样。

全屏显示当点击card并推开邻居card时。

我该怎么做：

这是我的代码：

   animations: [
     trigger('heroState', [
       state('inactive', style({ height: '*', width: '*' })),
       state('active',  style({ position: 'absolute', top: '0', margin: '0',  padding: '0', width: '100%', height: '100%' })),
       transition('inactive <=> active', animate('5000ms ease-in-out'))
     ])
   ],

https://plnkr.co/edit/uqqYXCc1ZGv5SMtBcCM5?p=preview

Answer 1

这取决于，如果你想把它推开，你就无法定位任何绝对的东西，或者你将不得不进行大量的计算。

此代码推动底部卡片方式，但高度固定在500px上。你可以调整/改变它。至height:'100%'左右。

animations: [
     trigger('heroState', [
       state('inactive', style({ height: '*', width: '*' })),
       state('active',  style({ height: '500px' })),
       transition('inactive <=> active', animate('500ms ease-in-out'))
     ])
   ]

<强>更新在这里，我向您的plnkr添加了一个小更新https://plnkr.co/edit/YkPSXgFIEKQefbkYkZIh?p=preview 它推开盒子，如果激活它会关闭其他打开的卡片。

更新2：
如果你真的想要，顶部卡片被推开，你需要像jQuery这样的东西，因为它会影响父元素，不能用常规的css改变。这是一个例子。 你必须根据自己的需要进行调整。 （目前它仅适用于3张卡片，代码应“优化”）

let container = document.querySelector(".container");
            container.addEventListener("click", event => {
                let selecteClass = "selected";
                if (event.target.className.indexOf("box") > -1) {
                    event.target.className += " clicked";
                    if (event.target.className.indexOf(selecteClass) > -1) {
                        event.target.className = event.target.className.replace(" "+ selecteClass, "");
                        $(".container")[0].className =  $(".container")[0].className.replace(/ margin-4-[^"]+/,"");
                    } else {
                        let currentSelection = document.querySelector(".box." + selecteClass);
                        if (currentSelection) {
                            currentSelection.className = currentSelection.className.replace(" "+ selecteClass, "");
                        }
                        event.target.className += " " + selecteClass;
              
                    }
                    $(".container:has(.box:first-child.selected)").addClass("margin-4-first");
                    $(".container:has(.box:nth-child(2).selected)").addClass("margin-4-second");
                    $(".container:has(.box:nth-child(3).selected)").addClass("margin-4-third");
                }
            });

            container.addEventListener("transitionend", event => {
                if (event.propertyName === "background-color") {
                    event.target.className = event.target.className.replace(" clicked", "");
                }
            });

html{
                height: 100%;
            }

            body{
                margin: 0;
                padding: 0;
                height: 100%;
                overflow: hidden;
            }
            
            .container {
                background-color: #EEEEEE;
                height: 100%;
                padding: 20px 0 0 0;
                margin-top:0;
                overflow: hidden;
                transition: all 0.5s ease-out;
            }
            
            .box {
                background-color: #ffffff;
                width: 300px;
                height: 50px;
                margin: 20px auto 10px auto;
                border-radius: 5px;
                box-shadow: 0 0 10px #828282;
                transition: height 0.5s ease-out, background-color 0.05s ease-out;
            }
            
            .selected {
                height: 90%;
            }
            
            .clicked {
                background-color: #eeeeee;
            }

            .margin-4-first{
                margin-top:0;
            }

            .margin-4-second{
                margin-top: -100px;
                padding-bottom:20%;
            }

            .margin-4-third{
                margin-top:-150px;
                padding-bottom:20%;
            }

<!doctype html>
<html>
    <head>
        <title>Boxes</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
     <div class="container">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
</html>

Angular2推卡动画？

1 个答案: