本质上，我正在尝试重新创建单击该图层时在此处看到的效果，并且当元素在平滑过渡中调整时，它将变为全屏显示：
https://s3.amazonaws.com/www-inside-design/uploads/2019/01/image4.gif
我在这里尝试使用CSS。但是，“过渡：全部”似乎并不适用于所有元素。
.goalcard
{
// background-color:rgba(0, 0, 0, .06) ;
background: linear-gradient($primary-color, $secondary-color);
background-repeat: no-repeat;
background-attachment: fixed;
padding: 10px;
margin-top: 20px;
font-size: 1.4rem;
vertical-align: top;
color: #fff;
transition: all 600ms ease-in-out;
}
.gcfull {
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
}