相关疑难解决方法(0)

我试图让我的粘性标题具有过渡效果,因此它可以减轻而不仅仅是快速移动.

我究竟做错了什么？

这是我的工作版本:

http://codepen.io/juanmata/pen/RVMbmr

基本上下面的代码将类添加到我的包装类中,这很好用.

$(window).on('load', function() {
    $(window).on("scroll touchmove", function () {
        $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
    });
});

这是CSS部分:

.wrapper {
    grid-template-rows: 80px calc(75vh - 80px) 25vh 80px;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.tiny {
    grid-template-rows: 40px calc(75vh - 40px) 25vh 80px;
}

所以标题确实缩小了它应该但没有动画,我错过了什么或转换根本不适用于网格？

这是css-grid文档的链接.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

$(window).on('load', function() {
  $(window).on("scroll touchmove", function() {
    $('.wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
  });
});

* {
	margin:0;
	padding:0;
}

.wrapper {
	display: grid;
	grid-gap: 0px;
	grid-template-columns: …

我正在使用 CSS 网格布局来定位网站上的各个部分。我使用grid-column: x / x;和grid-row x / x;来设置它们在页面上的位置和大小。它工作得很好。

现在，我正在尝试在屏幕尺寸更改时发生的两个网格列修复之间的平滑过渡设置动画。变化是 from grid-column: 3 / 9;，grid-column: 2 / 10;这意味着 div 在1fr每一侧都增长。目前它只是“ping”到位，但我希望两者之间有一个平稳的过渡。

任何人有任何想法如何解决它？

这是我的 CSS 文件中的片段：

nav {
    background-color: $company-blue;
    border          : 3px solid $company-yellow;
    opacity         : 0.8;
    grid-column     : 3 / 9;
    grid-row        : 3 / 4;
    ...
    @media screen and (max-width: 1378px) {
    grid-column : 2 / 10;
    }
}

我是CSS的网格新手,但我想尝试一下.我有一个3x3盒子的网格.当我将鼠标悬停在一个盒子上时,它应该应该排出整行...但是这不起作用.

当我将鼠标悬停在1屏幕上时,它会完全填满屏幕,当我将鼠标悬停在3屏幕上时,它会开始闪烁并且无法正常工作.

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, minmax(100px, auto));
  grid-template-rows: repeat(3, minmax(100px, auto));
}

[class^="item"] {
  text-align: center;
  box-sizing: border-box;
  padding: 10%;
  font-size: 5em;
  color: #0580d5;
  transition: .2s;
}

[class^="item"]:hover {
  grid-column-start: 1;
  grid-column-end: 4;
}

.item-1 {
  /*grid-area: 1 / 2 / span 2 / span 2;*/
}

.container>div {
  border: 2px solid #0580d5;
  background-color: rgba(40, 180, 240, .3);
  border-radius: 5px;
}

@media only screen and (min-width: 789px) {
  .container {
    grid-template-columns: …