0

Я взял некое решение моей задачи. При наведении на плавающую кнопочку, у меня с анимацией красиво появляется список других кнопок. Когда убираю курсор из этой области, список кнопок пропадает и всё ок. НО. Я хочу, чтобы они исчезали с какой-нибудь анимацией, например с такой же, как и появляются, только наоборот. Нужно придумать как-то без JS. Заранее спасибо за помощь.

Источник: http://androidcss.com/css/css3-floating-button-tutorial/

.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #F33;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  z-index: 1000;
  animation: bot-to-top 2s ease-out;
}

ul {
  position: fixed;
  right: 40px;
  padding-bottom: 20px;
  bottom: 80px;
  z-index: 100;
}

ul li {
  list-style: none;
  margin-bottom: 10px;
}

ul li a {
  background-color: #F33;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  width: 60px;
  height: 60px;
  display: block;
}

ul:hover {
  visibility: visible!important;
  opacity: 1!important;
}

.my-float {
  font-size: 24px;
  margin-top: 18px;
}

a#menu-share+ul {
  visibility: hidden;
}

a#menu-share:hover+ul {
  visibility: visible;
  animation: scale-in 0.5s;
}

a#menu-share i {
  animation: rotate-in 0.5s;
}

a#menu-share:hover>i {
  animation: rotate-out 0.5s;
}

@keyframes bot-to-top {
  0% {
    bottom: -40px
  }
  50% {
    bottom: 40px
  }
}

@keyframes scale-in {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rotate-in {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-out {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
<a href="#" class="float" id="menu-share">
  <i class="fa fa-share my-float"></i>
</a>

<ul>
  <li>
    <a href="#">
      <i class="fa fa-facebook my-float"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-google-plus my-float"></i>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-twitter my-float"></i>
    </a>
  </li>
</ul>

1 ответ 1

1

Я пытался найти решение согласно этой ссылки > http://androidcss.com/css/css3-floating-button-tutorial

Мне не удалось найти решение через соседа. Это очень сложное решение для меня и я не могу понять логику. Я пытался создать дополнительные анимации, использовал даже Not, но много решений просто не сработало. Более того на примере видно, что результат данного шаблона имеет баг, верстая, мне пришлось понять логику этой машины, которая работает на их сайте с багом.

Я полностью переделал шаблон и стили и вот что получилось.

.wrapper {   
   max-width: 768px;
   margin: 0 auto;
} 

.wrapper .list {   
  width: 0;   
  padding: 0;
  list-style-type: none;
} 

.list__item {    
  margin: 10px 0 0 0; 
}     

.list__item:last-child .list__link  {     
  transform: scale(1);
  visibility: visible; 
  transform: rotate(0deg);
  opacity: 1;
}     

.list:hover .list__item:last-child .list__link  {      
  transform: rotate(360deg);
  color: #fff; 
}   

.list__link {    
  display: flex; 
  align-items: center; 
  justify-content: center;   
  visibility: hidden;
  opacity: 0; 
  transform: scale(0);
  width: 100px;
  height: 100px; 
  text-decoration: none;
  background-color: red;    
  border-radius: 50%;
  font-size: 42px; 
  color: #000;   
  transition: 0.3s;
}  

.list:hover .list__link {       
  visibility: visible; 
  transform: scale(1);
  opacity: 1; 
}    

.list:hover { 
 width: 100px;
}

.list__link:hover { 
 color: #fff;
}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <title>Transition</title>
</head>
<body>
  <div class='wrapper'> 
    <ul class='list'> 
      <li class='list__item'> 
        <a class='list__link' href="#">
          <i class="fa fa-facebook"></i>
        </a> 
      </li> 
    
      <li class='list__item'> 
        <a class='list__link' href="#">
          <i class="fa fa-google-plus my-float"></i>
        </a> 
      </li> 
    
      <li class='list__item'> 
        <a class='list__link' href="#">
          <i class="fa fa-twitter my-float"></i>
        </a> 
      </li>   
      
      <li class='list__item'> 
        <a class='list__link' href="#">
          <i class="fa fa-share my-float"></i>
       </a> 
      </li> 
    </ul> 
  </div>
</body>
</html>

Для фиксированного меню вы можете отказаться от wrapper и использовать

fixed = .fixed { 
position: fixed; 
width: 100px; 
bottom: 0; 
right: 0;  
} 

Класс fixed = wrapper.

Можно так же использовать обертку wrapper и fixed.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.