【问题标题】:Angular2 push card animation?Angular2推卡动画?
【发布时间】: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

【问题讨论】:

标签: css angular animation typescript


【解决方案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',但它看起来不像图像。
  • 检查我添加的代码,我希望它可以作为一个粗略的指南。它需要一些调整,但会推顶牌。
猜你喜欢
  • 2017-07-11
  • 2017-05-24
  • 1970-01-01
  • 2016-11-01
  • 1970-01-01
  • 1970-01-01
  • 2017-06-17
  • 2016-12-12
  • 2017-08-16
相关资源
最近更新 更多