MDL卡高定制

Question

所以我想让一张卡片看起来和Material design spec中应该做的一样

Short video demo

我已经设法在一个简单的红色正方形上使用 jquery 来做到这一点（见第一个 sn-p）我只是给所需的元素 0 高度和宽度，然后用 jquery 将高度和宽度设置为我想要的大小是。

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

<!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

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