Angular2推卡动画？

Posted 2023-03-13

【中文标题】Angular2推卡动画？

【英文标题】：Angular2 push card animation?

【发布时间】：2017-07-19 17:58:54

【问题描述】：

我希望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

【问题讨论】：

这里有一个关于如何发布示例代码How to create a Minimal, Complete, and Verifiable example的提示，这将帮助您更快地得到答案。

【参考方案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>

【讨论】：

Fiex height 不是一个好的解决方案。 card 的顶部不动，底部可能超出屏幕。

@user6148078 你签出 plnkr 链接了吗？在这里，您可以调整高度，如提到的百分比，或 em 或 ... 。我将固定设置为仅用于测试。

@user6148078 顺便说一下，它应该用作图像还是您的 plnkr？因为我的解决方案作为图像工作，除了顶部卡片的 pusing，但这对于角度动画来说并不容易。

感谢您回答我的问题。是的，困难在于推顶牌。我尝试使用position: 'absolute', top: '0'，但它看起来不像图像。

检查我添加的代码，我希望它可以作为一个粗略的指南。它需要一些调整，但会推顶牌。