Плавная анимация плюс и минуса при клике

256

24 декабря 2017, 07:25

$(".summary").click(function(){ 
	if ($("#hotel-facilities").is(":hidden")){ 
		$("#hotel-facilities").slideDown("slow"); 
		$(".summary:before").css({"-webkit-transform":"translate(-50%,-50%) rotate(0)"}); 
}	else { 
	$("#hotel-facilities").hide("slow"); 
	$(".summary:before").css({"-webkit-transform":"translate(-50%,-50%) rotate(-90)"}); 
} 
 
});

.is-hidden { 
	display: none; 
} 
.summary { 
	font-size: 14px; 
	padding: 14px 40px; 
	position: relative; 
	list-style-type: none; 
	margin: 0; 
	font-weight: 400; 
} 
.summary:before { 
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/ 
	transform: translate(-50%,-50%) rotate(-90deg); 
    will-change: translate,rotate; 
} 
.summary:after { 
	transform: translate(-50%,-50%); 
    will-change: translate,opacity; 
 
} 
.summary:after, 
.summary:before { 
	content: ""; 
	width: 14px; 
	height: 2px; 
	border-radius: 2px; 
	background-color: #37454d; 
	display: block; 
	position: absolute; 
	top: 50%; 
	transition: all .2s ease-in-out; 
	opacity: 1; 
	left: 21px; 
	contain: strict; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<section class="details"> 
	<h4 class="summary" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4> 
  <div id="hotel-facilities" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container"> 
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> 
        <span class="label">24-hour reception (4923)</span> 
      </label> 
    </div> 
  </div> 
</section>

Всем привет.Есть задачка чтобы при клике плюс плавно стал минусом все готово почти просто нужно с помощью jquery при клике добавить нужный стиль к нужному элементу вот тут я застрял.Ключевой момент при клике нужно в классе .summary:before сменить анимацию transform: translate(-50%,-50%) rotate(-90deg); на -webkit-transform: translate(-50%,-50%) rotate(0);и все.

Answer 1

В данном примере мы не обращаемся к псевдоэлементу :before через jquery а добавляем класс, который изменяет его положение.

$(".summary").click(function() { 
 
    if ($("#hotel-facilities").is(":hidden")) { 
     
		    $("#hotel-facilities").slideDown("slow"); 
		    $(".summary").addClass("open"); 
         
    }else { 
 
        $("#hotel-facilities").hide("slow"); 
	       $(".summary").removeClass("open"); 
     
    } 
 
});

.is-hidden { 
	display: none; 
} 
.summary { 
	font-size: 14px; 
	padding: 14px 40px; 
	position: relative; 
	list-style-type: none; 
	margin: 0; 
	font-weight: 400; 
} 
.summary:before { 
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/ 
	transform: translate(-50%,-50%) rotate(-90deg); 
    will-change: translate,rotate; 
} 
.summary:after { 
	transform: translate(-50%,-50%); 
    will-change: translate,opacity; 
 
} 
.summary.open:before{ /* добавочный класс */ 
    transform:translate(-50%,-50%) rotate(-0deg); 
    width:0; 
} 
.summary:after, 
.summary:before { 
	content: ""; 
	width: 14px; 
	height: 2px; 
	border-radius: 2px; 
	background-color: #37454d; 
	display: block; 
	position: absolute; 
	top: 50%; 
	transition: all .2s ease-in-out; 
	opacity: 1; 
	left: 21px; 
	contain: strict; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<section class="details"> 
	<h4 class="summary" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4> 
  <div id="hotel-facilities" class="is-hidden"> 
    <div role="treeitem" aria-selected="false"> 
      <label class="checkbox-container"> 
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox"> 
        <span class="label">24-hour reception (4923)</span> 
      </label> 
    </div> 
  </div> 
</section>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Sql injections, dvwa. Ошибка

Привет всем, прохожу курс по Этичному хикингу, возник вопрос по поводу Sql injections, курс 2015 года, поэтому есть различие

221

MySQL

Как выполнить SQL UPDATE и SELECT

Есть две таблицы arhive и valid_date с общим полем entity_idНужно записать в поле offer_archive 1 если valid_date+23:59:59 меньше текущего времени

249

MySQL

Как уменьшить убийство моего SSD с помощью MYSQL

Вопрос - какие настройки поменять в конфигах MYSQL чтобы мой диск расходовал меньше свой ресурс

272

Возможно ли сделать паузу в цикле C#?

У меня есть цикл и если у меня переменная меньше 0, то мне нужно, чтобы высвечивалась новая форма, а цикл ждал пока я не закончу работать с формойВозможно...

251