定位随时间缩放(.5)

Question

我在下拉菜单上使用scale(.5)在悬停时创建一个调整大小的效果。然而，当涉及到定位，我似乎无法计算，如何定位下拉菜单右对齐，并直接低于元素。科德芬。

举个例子:现在

​

​

​

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*,
::after,
::before {
  box-sizing: border-box;
}

html {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
  background-color: #212121;
}

.select {
  position: relative;
}
.select:hover .list {
  transform: scale(1);
  opacity: 1;
}
.select .list {
  position: absolute;
  top: 100%;
  right: 0;
  display: inline-flex;
  flex-direction: column;
  min-width: 140px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.5);
  user-select: none;
  transform: scale(0.5);
  opacity: 0;
  transition: all 400ms ease;
}
.select .list .item,
.select .list .label {
  margin: .25rem 0;
}
.select .list .item {
  padding: .125rem 1rem;
  cursor: pointer;
}
.select .list .item:hover {
  background-color: #ECEFF1;
}
.select .list .item:active {
  background-color: #cfd6db;
}
.select .list .label {
  padding: .25rem 1rem;
  font-weight: 500;
  cursor: default;
}
.select .list > .group {
  padding: .25rem 0;
}
.select .list > .group:not(:last-child) {
  border-bottom: solid 1px #ECEFF1;
}
.select .list > .group:not(:first-child) {
  border-top: solid 1px #ECEFF1;
}
.select .list > .group + .group {
  border-top: 0;
}

<div class="select">
  <span>Hover</span>
  <div class="list">
    <div class="label">
      Browsers
    </div>
    <div class="group">
      <div class="item">
        Chrome
      </div>
      <div class="item">
        Safari
      </div>
      <div class="item">
        Firefox
      </div>
    </div>
    <div class="group">
      <div class="item">
        Others
      </div>
    </div>
    <div class="item" style="font-size: .875rem; font-style: italic;">
      Edit List
    </div>
  </div>
</div>

​

Answer 1

只需将transform-origin属性添加到.select .list中即可。它将允许您更改转换元素的位置。

.select .list{transform-origin: top right;}

更新片段:-

​

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*,
::after,
::before {
  box-sizing: border-box;
}

html {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
  background-color: #212121;
}

.select {
  position: relative;
}
.select:hover .list {
  transform: scale(1);
  opacity: 1;
}
.select .list {
  position: absolute;
  top: 100%;
  right: 0;
  display: inline-flex;
  flex-direction: column;
  min-width: 140px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.5);
  user-select: none;
  transform: scale(0.5);
  opacity: 0;
  transition: all 400ms ease;
transform-origin: top right;
}
.select .list .item,
.select .list .label {
  margin: .25rem 0;
}
.select .list .item {
  padding: .125rem 1rem;
  cursor: pointer;
}
.select .list .item:hover {
  background-color: #ECEFF1;
}
.select .list .item:active {
  background-color: #cfd6db;
}
.select .list .label {
  padding: .25rem 1rem;
  font-weight: 500;
  cursor: default;
}
.select .list > .group {
  padding: .25rem 0;
}
.select .list > .group:not(:last-child) {
  border-bottom: solid 1px #ECEFF1;
}
.select .list > .group:not(:first-child) {
  border-top: solid 1px #ECEFF1;
}
.select .list > .group + .group {
  border-top: 0;
}

<div class="select">
  <span>Hover</span>
  <div class="list">
    <div class="label">
      Browsers
    </div>
    <div class="group">
      <div class="item">
        Chrome
      </div>
      <div class="item">
        Safari
      </div>
      <div class="item">
        Firefox
      </div>
    </div>
    <div class="group">
      <div class="item">
        Others
      </div>
    </div>
    <div class="item" style="font-size: .875rem; font-style: italic;">
      Edit List
    </div>
  </div>
</div>

​

Answer 2

不太确定你在找什么。在.select .list { }里面试试这个。

transform-origin: right top;

希望就是这样。