Angular2推卡動畫？

我希望card的頂部像底部一樣生成動畫。Angular2推卡動畫？

使其全屏當點擊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

來源

2017-02-28 user6148078

這裏就如何發佈示例代碼小費[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve），這將幫助您更快獲得答案。 –

這取決於，如果你想推走，你不能位置什麼都是絕對的，否則你將不得不做很多計算。

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

來源

2017-03-01 12:09:40

Fiex的「高度」不是一個好的解決方案。「卡片」的頂部不會移動，底部可能會出現屏幕不顯示。 – user6148078

@ user6148078您是否檢出plnkr鏈接？在這裏你可以調整高度，如百分比提到的，或者是em或...。我只是爲了測試而設定的。 –

@ user6148078順便說一句，它應該作爲圖像或作爲你的plnkr？因爲我的解決方案作爲圖像工作，除了頂部卡片的插入，但這對於角度動畫來說並不容易。 –

Angular2推卡動畫？

回答

相關問題