个人中心
gpt4 book ai didi

css - Angular2推卡动画？

转载 作者：搜寻专家 更新时间：2023-10-30 21:51:57 25 4
gpt4 key购买 nike

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

全屏当点击card并将邻居card推开。

我该怎么做:

enter image description here

这是我的代码:

   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

最佳答案

这个要看，如果要推开，不能绝对定位，否则需要做很多计算。

此代码推送底卡方式，但高度固定在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>

关于css - Angular2推卡动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42514260/

25 4 0
文章推荐： node.js - 如何在 typescript 中编写 Sequelize 交易
文章推荐： php - 将来自 JSON 的数据放入 MySQL 数据库
文章推荐： ios - 图像集有一个未分配的 child
文章推荐： php - 查询使 2 个得分相等的团队
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com