Question

我有4个菜单元素，旁边是语言，当我将鼠标悬停在语言上时，它们会从右向左移动并按下菜单。如何为推送应用流畅的动画效果？请查看下面的链接，以便您清楚地了解我的意思。

HTML：

<ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Materials</a></li>
            <li><a class="active" href="portfolio.html">Portfolio</a></li>
            <li><a href="contact.html">Contacts</a></li>
                <span class="lang">
                <li><a href="#">EN</a></li>
                        <li><a href="#">DE</a></li>
                        <li><a href="#">RU</a></li>
                </span>

      </ul>

CSS：

@keyframes languageIn {
  0% { transform: translateX(100%); opacity:0; }
  100% { transform: translateX(0); opacity:1; }

}

.navbar-nav a {
  line-height: 40px !important;
  position:relative;
}

.navbar-nav li > a:hover,
.navbar-nav li > a:active {
  transition: .5s ease-in-out;
  color: #ff0000 !important;
}

.navbar-nav a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ff0000;
    transition: width .3s;
}

.navbar-nav a:focus::after:not(.lang li a) {
    width: 100%;
}

.navbar-nav a.active::after {
    display: block;
    width: 100%;
    height: 2px;
    background: #ff0000;
    transition: width .3s;
}

.nav > li > a {
    padding:0px;
}
.nav li {
    padding-right:40px;
}

.lang li  {
  font-size: 14px;
  display: inline-block;
  padding-left: 7px;
  animation: goIn .5s ease-out;
}

 .lang li:not(:last-child) {
   display:none;
}

.lang:hover li:not(:last-child) {
  display:inline-block;
  animation: languageIn .5s ease-in-out;
}

这是完整的代码： https://codepen.io/anon/pen/dRzxmR

Answer 1

我稍稍调整了你的代码，所以现在它会起作用。它使用宽度，并使用转换而不是动画。

* {
  padding: 0;
  margin: 0;
  box-sizing:border-box;
}
a {
  text-decoration: none !important;
  color: #222222;
}
a:hover {
  color: #ff0000;
  cursor: pointer;
}

html,body {
  color: #191818;
  font-size: 14px;
  font-family: "Museo Sans Cyrl 100", sans-serif;
  animation: fadein 4.5s
  height: 100%;
}
/* Animate  on Loading page*/
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



.navbar-default {
  z-index:99;
  font-size: 14px;
  background-color: rgba(248,248,248,.6);
}

.navbar-nav a {
  line-height: 40px !important;
  position:relative;
  /*top:20px;*/
}

.navbar-nav li > a:hover,
.navbar-nav li > a:active {
  transition: .5s ease-in-out;
  color: #ff0000 !important;
}


.navbar-nav a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ff0000;
    transition: width .3s;
}

.navbar-nav a:focus::after:not(.lang li a) {
    width: 100%;
}

.navbar-nav a.active::after {
    display: block;
    width: 100%;
    height: 2px;
    background: #ff0000;
    transition: width .3s;
}

.navbar-nav .active {
  color: #ff0000 !important; 
}

.nav > li > a {
	padding:0px;
}
.nav li {
	padding-right:40px;
}

.logo-block {
  margin-left: 120px;
}
.logo-block h1 {
  color: #1b1a18;
  font-size: 22px;
}
.logo {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border-radius: 50%;
    border: 3px solid red;
    float: left;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 1;
}
.nav-palceholder {
  margin: 0 0 20px 0;
}
.navbar-brand h5{
  font-weight: 900;
  margin: 1px 0px 0px 0;
  padding: 0 0 0 50px;
  font-size: 17px;
}
.navbar-collapse{
  width: 100%;
}


/* PLACE WHERE LANGUAGE CONFIGURES */

.lang li  {
  font-size: 14px;
  display: inline-block;
  padding-left: 7px;
  animation: goIn .5s ease-out;
}

 .lang li:not(:last-child) {
   transform: translateX(100%); opacity:0; width: 0;
   display: inline-block;
   transition: .5s ease-in-out;
}

.lang:hover li:not(:last-child) {
  transform: translateX(0); opacity:1; width: 2em;
}

.lang li a {
	color: #ff0000;
}
span.lang li {
  padding-right: 0px !important;
}



/*nav fix*/
.navbar {
  border-radius: 0px !important;
}
.navbar-default {
  border-color: transparent !important;
}
span.lang li {
  padding-right: 0px !important;
}
.navbar-padding{
  padding: 15px 0 !important;
}

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>logo style</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
	
	
<header id="header">

<nav class="navbar navbar-default">
		<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
<a href="#" class="navbar-brand col-xs-7 col-sm-6 col-md-6">

					<div class="logo"></div>
					<h5>Logo<br> style</h5>
					<div class="clear"></div>

      </a>
      <div class="clear"></div>
    </div>

    <div class="collapse navbar-collapse navbar-padding" id="bs-example-navbar-collapse-1 ">
     
      <ul class="nav navbar-nav navbar-right">
      	 	<li><a href="index.html">Home</a></li>
							<li><a href="#">Materials</a></li>
							<li><a class="active" href="portfolio.html">Portfolio</a></li>
							<li><a href="contact.html">Contacts</a></li>
				<span class="lang">
		      	<li><a href="#">EN</a></li>
						<li><a href="#">DE</a></li>
						<li><a href="#">RU</a></li>
				</span>

      </ul>



    </div><!-- navbar-collapse -->
	</div><!--Container-->
</nav>
		
</header>





<script src="js/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

https://codepen.io/anon/pen/gRGYNb

如何在推送菜单时应用动画

1 个答案: