如何平滑地“夹住”包含文本的元素？

时间：2015-10-02 02:29:28

标签： javascript jquery html css

我正在尝试做什么

我的目标是转换一个列表，以便在单击某个项目时，它会平滑地上升到列表的顶部，成为标题（参见示例）。实际上，菜单UI会出现在它下面。我可以转换除了单击之外的所有元素的高度，以便将其平滑地设置为列表的顶部。这样可行！但是文本，当容器变得太小时，文本当然就消失了。我的意图是文本也要捏。

我尝试了什么

所以当然我必须使用变换。但是，变换会在视觉上捏住容器，但不会在物理上改变它所居住的空间，因此单击的列表项不会上升到顶部。

最后，当我尝试同时转换容器并将其高度更改为零时，结果与预期不符。变换考虑了高度的变化，此时文本仍然只是消失了。

此外，项目之间似乎存在间隙，因为变换实际上考虑了高度变化，使它们在视觉上变换得比它们的尺寸缩小更快！

我的问题

如何以流畅，流畅的方式同时转换容器并将其高度降低到零，而文本在任何时候都不会消失，直到收缩为止零高度（并且在转换过程中没有出现间隙）？

实施例

//name variables containing JQuery $...

$('.container').on('mousedown touchstart', function() {
  $allContainersExceptThis = $('.container').not(this);
  if (!this.isSelected) {
    $allContainersExceptThis.css({
      'transform': 'scaleY(0)'
    });
    $(this).css({
      'background-color': 'orange',
      'color': '#FF3300'
    });
    this.isSelected = true;
  } else {
    $allContainersExceptThis.css({
      'transform': ''
    });
    $(this).css({
      'background-color': '',
      'color': ''
    });
    this.isSelected = false;
  }
});
@import url(https://fonts.googleapis.com/css?family=Lobster);
 html,
body,
div {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.wrapper {
  margin: 10px;
  width: 2in;
  height: 3in;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  font-family: 'Lobster', cursive;
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}
.wrapper > .container {
  width: 100%;
  height: 0.6in;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  cursor: pointer;
  transition: transform 0.3s, background-color 0.3s, color 0.3s;
}
.wrapper .container:nth-child(even) {
  background-color: lightgray;
}
.wrapper .container:hover {
  background-color: gray;
  color: white;
}
.wrapper > .container > .name {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  flex: 1;
  justify-content: center;
  pointer-events:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div id="containerOne" class="container">
    <div class="name">Container One</div>
  </div>
  <div id="containerTwo" class="container">
    <div class="name">Container Two</div>
  </div>
  <div id="containerThree" class="container">
    <div class="name">Container Three</div>
  </div>
  <div id="containerFour" class="container">
    <div class="name">Container Four</div>
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

也许你在寻找什么？ 它是overflow: visible与您的转化的组合。

为了更清楚地展示动画，我已经放慢了它的速度。

编辑：通过更改顶部和底部边距而不是高度来解决间隙问题 - 因为更改高度会使比例变换甚至比现在更小。

＆＃13;
＆＃13; 
//name variables containing JQuery $...

$('.container').on('mousedown touchstart', function() {
  $allContainersExceptThis = $('.container').not(this);
  if (!this.isSelected) {
    $allContainersExceptThis.css({
      'transform': 'scaleY(0)',
      'margin-top': '-0.3in',
      'margin-bottom': '-0.3in'
    });
    $(this).css({
      'background-color': 'orange',
      'color': '#FF3300'
    });
    this.isSelected = true;
  } else {
    $allContainersExceptThis.css({
      'transform': '',
      'margin-top': '',
      'margin-bottom': ''
    });
    $(this).css({
      'background-color': '',
      'color': ''
    });
    this.isSelected = false;
  }
});
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Lobster);
 html,
body,
div {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.wrapper {
  margin: 10px;
  width: 2in;
  height: 3in;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  font-family: 'Lobster', cursive;
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}
.wrapper > .container {
  width: 100%;
  height: 0.6in;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  cursor: pointer;
  transition: transform 3s, background-color 3s, color 3s, margin-top 3s, margin-bottom 3s;
  background-color: lightpink;
}
.wrapper .container:nth-child(even) {
  background-color: lightgray;
}
.wrapper .container:hover {
  background-color: gray;
  color: white;
}
.wrapper > .container > .name {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  flex: 1;
  justify-content: center;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div id="containerOne" class="container">
    <div class="name">Container One</div>
  </div>
  <div id="containerTwo" class="container">
    <div class="name">Container Two</div>
  </div>
  <div id="containerThree" class="container">
    <div class="name">Container Three</div>
  </div>
  <div id="containerFour" class="container">
    <div class="name">Container Four</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

尝试使用.slideUp()，.slideDown() 

//name variables containing JQuery $...

$('.container').on('mousedown touchstart', function() {
  $allContainersExceptThis = $('.container').not(this);
  if (!this.isSelected) {
    $allContainersExceptThis.slideUp({
        duration: 500,
        done: function() {
          $(this).css('transform', 'scaleY(0)')
        }
    });
    $(this).css({
      'background-color': 'orange',
      'color': '#FF3300'
    });
    this.isSelected = true;
  } else {
    $allContainersExceptThis.slideDown({
        duration: 500,
        start: function() {
          $(this).css('transform', 'scaleY(1)')
        }
    });
    $(this).css({
      'background-color': '',
      'color': ''
    });
    this.isSelected = false;
  }
});
@import url(https://fonts.googleapis.com/css?family=Lobster);
 html,
body,
div {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.wrapper {
  margin: 10px;
  width: 2in;
  height: 3in;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  font-family: 'Lobster', cursive;
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}
.wrapper > .container {
  width: 100%;
  height: 0.6in;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  cursor: pointer;
  transition: transform 0.3s, background-color 0.3s, color 0.3s;
}
.wrapper .container:nth-child(even) {
  background-color: lightgray;
}
.wrapper .container:hover {
  background-color: gray;
  color: white;
}
.wrapper > .container > .name {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  flex: 1;
  justify-content: center;
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div id="containerOne" class="container">
    <div class="name">Container One</div>
  </div>
  <div id="containerTwo" class="container">
    <div class="name">Container Two</div>
  </div>
  <div id="containerThree" class="container">
    <div class="name">Container Three</div>
  </div>
  <div id="containerFour" class="container">
    <div class="name">Container Four</div>
  </div>
</div>

相关问题
最新问题