【前端】50个项目RotatingNavigationAnimation#3

前言

才发现github上有个50projects50days的项目，感觉还挺有趣的，可以练手学习，增加点代码练习，巩固下基础知识。
计划用vue2改写15个项目，vue3+js改写15个项目，vue3+ts改写20个项目。
在此仅作个人记录，权当打卡and水文章了hh

实现

第三个项目，RotatingNavigationAnimation，基于vue2实现
（简单的学习笔记在代码中）

<template>
  <div class="body">
    <div class="container" ref="container">
      <div class="circle-container">
        <div class="circle">
          <button id="close" @click="close">
            <i class="fas fa-times"></i>
          </button>
          <button id="open" @click="open">
            <i class="fas fa-bars"></i>
          </button>
        </div>
      </div>

      <div class="content">
        <h1>Amazing Article</h1>
        <small>Florin Pop</small>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.</p>

        <h3>My Dog</h3>
        <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="doggy" />
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p>
      </div>
    </div>

    <nav>
      <ul>
        <li><i class="fas fa-home"></i><a href="#"> Home</a></li>
        <li><i class="fas fa-user-alt"></i><a href="#"> About</a></li>
        <li><i class="fas fa-envelope"></i><a href="#"> Contact</a></li>
      </ul>
    </nav>

  </div>
</template>
<script>
export default {
  name: 'RotatingNavigationAnimation',
  components: {

  },
  data() {
    return {

    }
  },
  methods: {
    open(){
      this.$refs.container.classList.add('show-nav')
    },
    close(){
      this.$refs.container.classList.remove('show-nav')
    }
  }

}

</script>

<style scoped>
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css');

.body{
  font-family: 'Lato',sans-serif;
  background-color: #333;
  color: #222;
  overflow-x: hidden;
  margin: 0;
  text-align: left;
}

.container {
  background-color: #fafafa;
  /* 转换起点 */
  transform-origin: top left;
  /* 对transform添加发生变化时的动画 */
  transition: transform 0.5s linear;
  width: 100vw;
  min-height: 100vh;
  padding: 50px;
}

/* container变化的终点状态 */
.container.show-nav{
  transform: rotate(-20deg);
}

.circle-container {
  position: fixed;
  top: -100px;
  left: -100px;
}

.circle {
  background-color: #ff7979;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  position: relative;
  transition: transform 0.5s linear;
}

.container.show-nav .circle {
  transform: rotate(-70deg);
}

.circle button {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  background: transparent;
  border: 0;
  font-size: 26px;
  color: #fff;
}
.circle button:focus {
  outline: none;
}

.circle button#open {
  left: 60%;
}

.circle button#close{
  top:60%;
  /* 旋转90度 */
  transform: rotate(90deg);
  transform-origin: top left;
}

/* 加号选择器（相邻兄弟选择器），同一父元素下，被加元素的紧跟其后的指定元素 */
/* 此处为: .container.show-nav 同一层级的nav，其所属的所有li */
.container.show-nav + nav li {
  /* 变化的结果位置（所有的nav li回到原位，translateX归零） */
  transform: translateX(0);
  transition-delay: 0.3s;
}

nav {
  position: fixed;
  bottom: 40px;
  left: 0;
  z-index: 100;
}

/*  */
nav ul {
  list-style-type: none;
  padding-left: 30px;
}

nav ul li {
  text-transform: uppercase;
  color: #fff;
  margin: 40px 0;
  /* 变化的初始位置 */
  transform: translateX(-100%);
  transition: transform 0.4s ease-in;
}

nav ul li i {
  font-size: 20px;
  margin-right: 10px;
}

nav ul li + li {
  /* 偏移量15px */
  margin-left: 15px;
  /* 初始位置 */
  transform: translateX(-150%);
}

nav ul li + li + li {
  /* 偏移量30px */
  margin-left: 30px;
  /* 初始位置 */
  transform: translateX(-200%);
}

nav a {
  color: #fafafa;
  /* 发生交互时，0.5s的变化时间 */
  text-decoration: none;
  transition: all 0.5s;
}

nav a:hover {
  /* 发生交互时，变色并加粗 */
  color: #FF7979;
  font-weight: bold;
}

.content img {
  max-width: 100%;
}

.content {
  max-width: 1000px;
  margin:50px auto;
}

.content h1 {
  margin: 0;
}

.content small {
  color: #555;
  font-style: italic;
}

.content p{
  color: #333;
  line-height: 1.5;
}


</style>

其他

工程下的vue文件的css样式没做scoped…互相污染了，导致排查了一些时间…