javascript - 分配“translateX”值时元素丢失其“rotateZ”值

问题描述

我有我正在处理的这个测试页面。正如您从代码片段中看到的那样，我在 Z 轴上旋转了“共享transform: rotateZ(-90deg);”栏，并在左侧放置了transform-origin:0 0;。（注意：这是我第一次使用transform-origin，也许我做错了什么（？））。

我想做的事：

当页面向上滚动时，“共享”栏应该向左移动，在视口之外，保持transform: rotateZ(-90deg);属性，当页面向下滚动时，“共享”栏应该重新出现在相同的位置。因此，当发生转换时，它应该保持垂直移动。

问题：

当页面向上滚动并且“共享”栏移出视口时，该transform: translateX(-120px);属性将采取行动，就好像transform: rotateZ(-90deg);从未声明过一样。

如何根据滚动事件使其在所有转换期间保持垂直“固定”？

ALSO：为什么overflow-x“共享”栏在视口中消失时没有？

编辑：我尝试用leftand移动它right，但在这种情况下没有transition时间。

片段（注意：转到元素及其样式的 css 文件底部）.share

const burger = document.querySelector('.burger');
const nav = document.querySelector('nav');


burger.addEventListener('click', () => {
  nav.classList.toggle('active');
  burger.classList.toggle('hide');
  xicon.classList.toggle('active');
});

const xicon = document.querySelector('.xicon');
xicon.addEventListener('click', function() {
  nav.classList.toggle('active');
  xicon.classList.toggle('active');
  burger.classList.toggle('hide');
})



const header = document.querySelector('header');
let prev = window.pageYOffset;

window.addEventListener('scroll', function(){
  let current = window.pageYOffset;

  if(prev < current){
    header.classList.add('hide');
  }
  else {
    header.classList.remove('hide');
    }

    prev = current;

})


const shareThing = document.querySelector('.share');
let prevScroll = window.pageYOffset;

window.addEventListener('scroll', function() {
  let currentScroll = window.pageYOffset;

  if(prevScroll < currentScroll) {
    shareThing.classList.add('hide');
    icons.classList.add('hide');
  }
  else {
    shareThing.classList.remove('hide');
    icons.classList.remove('hide');
  }

  prevScroll = currentScroll;

})


let share = document.querySelector('.share');
let icons = document.querySelector('.side');

share.addEventListener('click', () => {
  icons.classList.toggle('active');
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.logoandicon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: powderblue;
  padding: .7em 0;
}

.logo {
  margin-left: .5em;
}

.burger {
  margin-right: 1em;
  z-index: 2;
}

.burger.hide {
  display: none;
}

nav ul li a {
  text-decoration: none;
  color: black;
  font-family: verdana;
}

nav ul li {
  text-align: center;
  list-style: none;
}

nav {
  padding: 1em 0;
  line-height: 2em;
  background: lightgreen;
  display: none;
}

nav.active {
  display: block;
}

.xicon {
  position: absolute;
  right: 1em;
  display: none;
}

.xicon.active {
  display: block;
}

header {
  width: 100vw;
  position: fixed;
}

header.hide {
  display: none;
}

main {
  padding-top: 4em;
}

.one {
  width: 20px;
  height: 20px;
  background: blue;
  color: white;
}

.two {
  width: 20px;
  height: 20px;
  background: green;
  color: white;
}

.three {
  width: 20px;
  height: 20px;
  background: red;
  color: white;
}

.side {
  width: 30px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 50%;
  background: black;
  display: none;
  border-radius: 10px;
}

.side.active {
  display: flex;
}

.side.hide {
  display: none;
}

.share {
  position: fixed;
  top: 50%;
  background: black;
  color: white;
  font-family: verdana;
  font-size: 1.3rem;
  transform: rotateZ(-90deg);
  transform-origin: 0 0;
  padding: .15em 1em;
  border-radius: 10px;
  border: 1px solid white;
  transition: 1s;
}

.share.hide {
  transform: translateX(-120px);
}

<header>
    <div class="logoandicon">
      <h1 class="logo">Logo</h1>
      <img src="menu.svg" class="burger" width="30px" alt="burger-icon">
      <img src="xicon.svg" class="xicon" width="27px" alt="x-icon">
    </div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
    </nav>
  </header>

  <main>

    <p class="share">Share</p>
    <div class="side">
      <div class="one">Fb</div>
      <div class="two">Ig</div>
      <div class="three">Tw</div>
    </div>

    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ut, animi iure sequi voluptatem maiores, aspernatur tempora, ipsa tempore, voluptate sint. Maiores quos inventore cumque reiciendis iusto illum, aut quam, suscipit temporibus veniam. Reprehenderit distinctio velit eveniet blanditiis, animi optio voluptas dolores repellendus ad itaque veritatis. Expedita deserunt, ab dolor accusamus sequi eum optio. Fuga dolorum, quod qui laboriosam iure molestiae magnam explicabo! Accusamus, alias, non. Eius voluptas in aspernatur natus illo et possimus optio, cupiditate saepe quisquam totam laboriosam ullam nihil consequatur rem earum ratione perspiciatis. Quo impedit ipsum assumenda suscipit unde inventore dolores quas? Ipsa aliquam sapiente rerum sit autem magni ad dolore iste vero optio saepe, impedit eveniet suscipit, deserunt. Modi architecto laudantium placeat beatae repellat harum deleniti facere deserunt officia unde mollitia error praesentium, sunt fugit recusandae soluta facilis earum voluptatem libero consectetur illum debitis quos! Odit unde, quo non blanditiis vitae aperiam obcaecati provident praesentium quas qui, veritatis enim accusamus iusto rerum harum porro maxime sit amet cum odio suscipit ipsum nulla adipisci. Totam consectetur quas ipsa. Natus officiis, eveniet reprehenderit neque rem sint eum, ratione, numquam blanditiis nisi culpa repudiandae nemo beatae. Ea cum officiis vel, sed distinctio, voluptatibus quibusdam! Soluta voluptate, non facilis?</h1>
  </main>


<script src="main.js">

</script>

标签： javascripthtmlcsscss-transforms

javascript - 分配“translateX”值时元素丢失其“rotateZ”值 - CSS

问题描述

解决方案

推荐阅读