Question

所以我想让卡片的显示方式与它在Material design spec

中完成的方式相同

我已经设法在一个简单的红色方块上使用jquery（参见第一个片段），我只需要给出所需的元素0高度＆amp;宽度，然后设置高度和高度的动画。宽度与jquery到我想要的大小。

任何MDL卡的问题是，我无法获得小于200的任何高度。您可以查看我的第二个片段，看看当我尝试将其设置为150px时会发生什么。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Card</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
    	<p id="Box"></p>
        <button id="Start">Start</button>
        <button id="Reset">Reset</button>
        <script>
        $(document).ready(function() {
            
            $("#Start").click(function(){
                $('#Box').animate({height: "150px", width: "150px"},{duration: 1000});
            });

             $("#Reset").click(function(){
                $('#Box').animate({height: "0px", width: "0px"},{duration: 1000});
            });
            
        });
        </script>
        <style>
        #Box{
        	width: 0px;
        	height: 0px;
        	background-color: red;
            box-shadow: -3px 1px 30px 0px rgba(50,50,50,0.25);
        }
        </style>
    </body>
</html>

$(document).ready(function(){
            
 $('.mdl-card').animate({height: "150px", width: "0px"},{duration: 1000});  
  $("#Start").click(function(){
    $('.mdl-card').animate({height: "150px", width: "150px"},{duration: 1000});
  });

  $("#Reset").click(function(){
    $('.mdl-card').animate({height: "0px", width: "0px"},{duration: 1000});
  });            
               
               
});

<!doctype html>
<html>
    <head>
 	<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
       <div class="mdl-card mdl-shadow--6dp"></div>
        <button id="Start">Start</button>
        <button id="Reset">Reset</button>
    </body>
   <style>
  .mdl-card{
  margin: 5px 5px;
  width: 0px;
  height: 0px;
}</style>
</html>

任何帮助都会非常感激，也许用jquery做另外一种方式？

Answer 1

在测试了代码段并查看了Chromes开发人员控制台发生的所有事情后，我发现.mdl-card在css中有min-height属性。将该值覆盖为0会为我修复它。

MDL卡片高度自定义

1 个答案: