Невозможно выполнить поворот при нажатии - PullRequest
Новая
       0

Невозможно выполнить поворот при нажатии

0 голосов
/ 05 апреля 2020

это мой самый первый пост, поэтому, пожалуйста, скажите мне, если я совершу какую-либо ошибку. Начал изучать html и css всего за неделю go для личного веб-проекта и столкнулся с трудностями при попытке применить функции javascript к моим меню. Дело в том, что я делаю контактный колонтитул, нажимая на слайд. Рядом со словом «контакт» (контакт) есть стрелка вверх. Решил слайд, но не могу заставить стрелку вращаться вниз при щелчке. HTML: 


<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.contacto_menu').click(function(){
    $('.icon-up-open').animate({
        transform: 'rotate(180deg)'
    });

});
$(document).ready(main);
 
var contador = 1;
 
function main () {
	$('.contacto_menu').click(function(){
		if (contador == 1) {
            $('.icon-up-open').animate({
				transform: 'rotate(180deg)'
			});
			$('footer').animate({
				bottom: '0'
			});
			contador = 0;
		} else {
			contador = 1;
			$('footer').animate({
				bottom: '-50px'
            });
            $('.icon-up-open').animate({
				transform: 'rotate(0deg)'
			});
        }
        
    });
}
footer {
      position: fixed;
      bottom: -50px;
      left: 50%;
      transform: translateX(-50%);
      width:70%;
      max-width: 800px;
      background: rgba(247,151,16,1);
      background: -moz-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(247,151,16,1)), color-stop(100%, rgba(247,54,1,1)));
      background: -webkit-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: -o-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: -ms-linear-gradient(-45deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      background: linear-gradient(135deg, rgba(247,151,16,1) 0%, rgba(247,54,1,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79710', endColorstr='#f73601', GradientType=1 );
      -webkit-box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
      box-shadow: 0px 11px 40px 1px rgba(0,0,0,0.75);
      border-radius: 200px 200px 20px 20px;
      -moz-border-radius: 200px 200px 20px 20px;
      -webkit-border-radius: 200px 200px 20px 20px;
      border: 0px solid #000000;
      z-index: 900;
   
}

.contacto_menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #FFF;
  font-size: large;
  top:-25px;

}

.icon-up-open{
  display: inline-block;
}

.footer ul li {
  display: inline-block;
  list-style: none;
  text-align: center;
  width: 32%;
  padding: 15px;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  color: #FFF;
}

.footer ul li a{
  text-decoration: none;
  color: #FFF;

}
<!DOCTYPE html>  
<link rel="stylesheet" href="css/footer.css">
<script src="java/footer1.js"></script>

<footer>
    <a href="#" class="contacto_menu">Contacto<i class="icon-up-open"></i></a>
        <div class="footer">
            <ul>
                <li>Correo:<a href="#"></a></li>
                <li>Telefono:<a href="#"></a></li>  
                <li>Whatsapp:<a href="#"></a></li>
            </ul>
        </div>
    </footer>
</html>

Ответы [ 2 ]

0 голосов
/ 05 апреля 2020

Я изменил вашу логику анимации c для работы с переключением класса на <body /> -элементе, а затем определяя анимации в вашем CSS.

Полученный код выглядит примерно так: 

$(document).ready(main);

// Clicking the .contacto_menu only toggles a CSS class now. Way better performance this way.
function main() {
  $('.contacto_menu').click(function() {
    $(document.body).toggleClass('contacto-expanded');
  });
}
footer {
  position: fixed;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 800px;
  background: rgba(247, 151, 16, 1);
  background: -moz-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(247, 151, 16, 1)), color-stop(100%, rgba(247, 54, 1, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%);
  background: linear-gradient(135deg, rgba(247, 151, 16, 1) 0%, rgba(247, 54, 1, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79710', endColorstr='#f73601', GradientType=1);
  -webkit-box-shadow: 0px 11px 40px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 11px 40px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 11px 40px 1px rgba(0, 0, 0, 0.75);
  border-radius: 200px 200px 20px 20px;
  -moz-border-radius: 200px 200px 20px 20px;
  -webkit-border-radius: 200px 200px 20px 20px;
  border: 0px solid #000000;
  z-index: 900;
  transition: bottom .4s; /* Added, to make transitions work */
}

.contacto_menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #FFF;
  font-size: large;
  top: -25px;
}

.icon-up-open {
  display: inline-block;
  transition: transform .4s; /* Added, to make transitions work */
}

/* Added, to make transitions work */
.contacto-expanded .icon-up-open {
  transform: rotate(180deg);
}

/* Added, to make transitions work */
.contacto-expanded footer {
  bottom: 0;
}

.footer ul li {
  display: inline-block;
  list-style: none;
  text-align: center;
  width: 32%;
  padding: 15px;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  color: #FFF;
}

.footer ul li a {
  text-decoration: none;
  color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
  <a href="#" class="contacto_menu">Contacto<i class="icon-up-open">R</i></a>
  <div class="footer">
    <ul>
      <li>Correo:
        <a href="#"></a>
      </li>
      <li>Telefono:
        <a href="#"></a>
      </li>
      <li>Whatsapp:
        <a href="#"></a>
      </li>
    </ul>
  </div>
</footer>
0 голосов
/ 05 апреля 2020

Можете ли вы изменить animate на css вот так 

$('.icon-up-open').css({
    transform: 'rotate(180deg)'
});
$('.icon-up-open').css({
    transform: 'rotate(0deg)'
});

Здесь можно посмотреть CodePen

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...