Добрый день!
Подскажите, пожалуйста, от чего может лагать анимация выплывающего меню на сайте? Анимация делается через css3 transition. Странно то, что такой же механизм стоит на других сайтах и все работает хорошо, а здесь почему-то лагает.
<div class="menu_container">
<div class="menu_left">
<div class="menu_cont">
<div class="logo">
<img src="/img/logo.png" alt="">
</div>
<div class="menu_title">Меню</div>
<ul class="list_menu">
<li><a href="#main" class="active"><span>Главный экран</span></a></li>
<li><a href="#sect_video"><span>Видео</span></a></li>
<li><a href="#course_info"><span>Что такое инструкторский курс</span></a></li>
<li><a href="#program_course"><span>Программа курса</span></a></li>
<li><a href="#content_course"><span>Что вы получите</span></a></li>
<li><a href="#slider"><span>Галерея офиса</span></a></li>
<li><a href="#feedback"><span>Отзывы</span></a></li>
<li><a href="#speakers"><span>Спикеры</span></a></li>
<li><a href="#course_price"><span>Стоимость курса</span></a></li>
<li><a href="#contact"><span>Контакты</span></a></li>
</ul>
</div>
</div>
<div class="menu__close"></div>
</div>
var body = $('body');
$('#menu').click(function(){
$('.menu_container').addClass('active');
body.addClass('block');
});
$('.menu__close').click(function(){
$('.menu_container').removeClass('active');
body.removeClass('block');
});
$('.menu_container a').click(function(){
$('.menu_container').removeClass('active');
body.removeClass('block');
});
.menu_container,
.popup_speak
background: rgba(#000, .0)
width: 380px
position: fixed
z-index: -1
height: calc(100% + 60px)
display: block
top: 0
left: 0
transition: background .5s, z-index .5s
&.active
z-index: 700
background: rgba(#000, .71)
.menu__close
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: 701
cursor: pointer
&:after
content: ''
position: absolute
top: 10px
right: 25px
height: 16px
width: 15px
background: url('/img/sprite.png')
background-position: -244px 0px
.menu_left
z-index: 702
position: absolute
left: 0
.menu_left
background: #fff
position: absolute
left: -320px
top: 0
max-width: 320px
transition: left .5s
height: 100%
overflow-y: scroll
box-sizing: border-box
.menu_cont
padding-top: 35px
padding-bottom: 35px
float: left
padding-left: 30px
padding-right: 30px
.jspVerticalBar
margin-right: 5px
width: 19px
box-sizing: border-box
height: calc(100% - 10px)
overflow: hidden
margin-top: 5px
.logo
margin-bottom: 40px
padding-left: 60px
width: 120px
img
width: 100%
.list_menu
float: left
font-size: 15px
span
line-height: 22px
display: inline-block
li
float: left
width: 100%
margin-bottom: 17px
a
padding-left: 55px
position: relative
display: block
color: #191919
letter-spacing: 1px
min-height: 33px
&.active
&:after
background-position: -440px -108px
&:after
content: ''
position: absolute
min-height: 33px
top: 50%
margin-top: -17px
left: 0
width: 33px
display: block
background: url('/img/sprite.png')
background-position: -478px -107px
.menu_title
margin-left: 23px
position: relative
text-align: center
line-height: normal
color: #191919
margin-bottom: 40px
font-size: 16px
letter-spacing: 1px
&:after
left: 0
&:before
right: 0
&:after,
&:before
content: ''
position: absolute
top: 10px
height: 1px
background: #d1d1d1
width: 70px
Десктоп,
мобилка.
Простой
