Javascript CSS中的菜单置乱

HTML:

//动画

lu, li{
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 150px;
    text-align: right;    
    border-style: none;
}

.menu{

    width:150px;
    height: 350px;
    margin:0 auto;

}



.menu li{  
position: relative;
  top:150px;
  bottom: 0;
  right: 0;
  margin: auto; 
  border-style:none;  
}

---

< P>我想激活这个在我的网站中间的菜单，以这种形式进入最终的左边。但是，当我调整窗口的大小时，菜单没有响应，它不会停留在屏幕的中间。有什么帮助吗？

我不知道我是否正确理解了你的问题

请检查此款式，并让我知道这是否满足您的需求

#item7{
  transition: opacity .8s, left .8s ease-out;
  -moz-transition: opacity .8s, left .8s ease-out;
  -webkit-transition: opacity .8s, left .8s ease-out;
  -o-transition: opacity .8s, left .8s ease-out;
}
#item6{
  transition: opacity 1s, left 1s ease-out;
  -moz-transition: opacity 1s, left 1s ease-out;
  -webkit-transition: opacity 1s, left 1s ease-out;
  -o-transition: opacity 1s, left 1s ease-out;
}
#item5{
  transition: opacity 1.2s, left 1.2s ease-out;
  -moz-transition: opacity 1.2s, left 1.2s ease-out;
  -webkit-transition: opacity 1.2s, left 1.2s ease-out;
  -o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4{
  transition: opacity 1.4s, left 1.4s ease-out;
  -moz-transition: opacity 1.4s, left 1.4s ease-out;
  -webkit-transition: opacity 1.4s, left 1.4s ease-out;
  -o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3{
  transition: opacity 1.6s, left 1.6s ease-out;
  -moz-transition: opacity 1.6s, left 1.6s ease-out;
  -webkit-transition: opacity 1.6s, left 1.6s ease-out;
  -o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2{
  transition: opacity 1.8s, left 1.8s ease-out;
  -moz-transition: opacity 1.8s, left 1.8s ease-out;
  -webkit-transition: opacity 1.8s, left 1.8s ease-out;
  -o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1{
  transition: opacity 2s, left 2s ease-out;
  -moz-transition: opacity 2s, left 2s ease-out;
  -webkit-transition: opacity 2s, left 2s ease-out;
  -o-transition: opacity 2s, left 2s ease-out;
}

---

伙计，这就是我想要的。。但是，每当我应用你的方法时，动画就会停止。。如何解决此问题根据您的完整代码，这是什么检查表（此），myFunction（），myFunction2（），我们可以开始聊天吗@阿伦厘米

#item7{
  transition: opacity .8s, left .8s ease-out;
  -moz-transition: opacity .8s, left .8s ease-out;
  -webkit-transition: opacity .8s, left .8s ease-out;
  -o-transition: opacity .8s, left .8s ease-out;
}
#item6{
  transition: opacity 1s, left 1s ease-out;
  -moz-transition: opacity 1s, left 1s ease-out;
  -webkit-transition: opacity 1s, left 1s ease-out;
  -o-transition: opacity 1s, left 1s ease-out;
}
#item5{
  transition: opacity 1.2s, left 1.2s ease-out;
  -moz-transition: opacity 1.2s, left 1.2s ease-out;
  -webkit-transition: opacity 1.2s, left 1.2s ease-out;
  -o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4{
  transition: opacity 1.4s, left 1.4s ease-out;
  -moz-transition: opacity 1.4s, left 1.4s ease-out;
  -webkit-transition: opacity 1.4s, left 1.4s ease-out;
  -o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3{
  transition: opacity 1.6s, left 1.6s ease-out;
  -moz-transition: opacity 1.6s, left 1.6s ease-out;
  -webkit-transition: opacity 1.6s, left 1.6s ease-out;
  -o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2{
  transition: opacity 1.8s, left 1.8s ease-out;
  -moz-transition: opacity 1.8s, left 1.8s ease-out;
  -webkit-transition: opacity 1.8s, left 1.8s ease-out;
  -o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1{
  transition: opacity 2s, left 2s ease-out;
  -moz-transition: opacity 2s, left 2s ease-out;
  -webkit-transition: opacity 2s, left 2s ease-out;
  -o-transition: opacity 2s, left 2s ease-out;
}

lu, li{

       list-style-type: none;
       font-size: 1.5em;
       text-align: center;    
       border-style: none;
 }
.menu{
     width:150px;
     height: 350px;
     margin:0 auto;

}
.menu li{  
    position: relative;
    top:150px;
    margin: 0 auto; 
    border-style:none;  
   }