Пытался реализовать анимацию появления блока с правой стороны, получилось почти то что я хотел. Но есть две проблемы.
Во первых анимация срабатывает только при 2 отображении элемента, во вторых анимация не срабатывает на скрытие элемента. Как это все исправить?
$(document).on("click", ".project__discr--active", function () {
// $(' .modal-dark').removeClass('js-module-hide').show(600, 'swing');
module();
});
$(document).on("click", ".js-close-modal", function () {
// $(' .modal-dark').addClass('js-module-hide').hide(600, 'swing');
module();
});
var box = $('.modal-dark, .modal');
function module () {
if (box.hasClass('js-module-hide')) {
box.removeClass('js-module-hide');
setTimeout(function () {
box.removeClass('visuallyhidden');
}, 20);
} else {
box.addClass('visuallyhidden');
box.one('transitionend', function(e) {
box.addClass('js-module-hide');
});
}
};
body {
overflow: hidden;
}
.project__discr--active {
display: inline-block;
background: rgba(0, 2, 45, 0.4);
cursor: pointer;
}
.visuallyhidden {
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
opacity: 1;
}
.js-module-hide {
display: none;
opacity: 0;
}
.modal-dark {
background: rgba(0, 0, 0, 0.8);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
}
.modal.js-module-hide {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.visuallyhidden {
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
opacity: 1;
}
.modal {
height: 600px;
background: #fff;
position: absolute;
top: 0;
margin-top: 120px;
padding: 20px 0;
left: 0;
width: 100%;
z-index: 10;
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
will-change: top;
}
.base {
width: 100%;
margin: 0 auto;
position: relative;
}
.close-modal {
cursor: pointer;
position: absolute;
right: 0;
font-size: 30px;
border-radius: 100%;
-webkit-transition: all ease .3s;
transition: all ease .3s;
}
.project-gallerey {
float: left;
width: 60%;
position: relative;
}
.project-info {
float: left;
width: 32%;
margin-top: 50px;
margin-left: 35px;
padding-left: 15px;
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.8);
}
- - HTML5 & CSS3
- - jQuery
- - oo javascript
- - SEO optimization
- - cross browser compatibility
- - project management
- - DotNetNuke skinning
Ответ
Возможно, я не до конца понял вашу логику. Но мне показалось, что вы слегка намудрили с классами и напрасно использовали конструкцию
var box = $('.modal-dark, .modal');
Таким образом, вы выбрали два элемента, родителя и потомка и работали с ним как с одним: проверяли наличие класса, добавляли и убирали классы (одновременно обоим элементам). Когда я навел в этой части порядок, т.е. разделил функции родителя и потомка (родитель просто скрывается, а потомок исполняет анимацию) - все встало на свои места.
$(document).on("click", ".project__discr--active", function () {
// $(' .modal-dark').removeClass('js-module-hide').show(600, 'swing');
module();
});
$(document).on("click", ".js-close-modal", function () {
// $(' .modal-dark').addClass('js-module-hide').hide(600, 'swing');
module();
});
var box = $('.modal-dark'),
modal = $('.modal');
function module () {
if (box.hasClass('js-module-hide')) {
box.removeClass('js-module-hide');
setTimeout(function () {
modal.removeClass('visuallyhidden');
}, 20);
} else {
modal.addClass('visuallyhidden');
modal.one('transitionend', function(e) {
box.addClass('js-module-hide');
});
}
};
body {
overflow: hidden;
}
.project__discr--active {
display: inline-block;
background: rgba(0, 2, 45, 0.4);
cursor: pointer;
}
.visuallyhidden {
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
opacity: 1;
}
.js-module-hide {
display: none;
opacity: 0;
}
.modal-dark {
background: rgba(0, 0, 0, 0.8);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
}
.modal.js-module-hide {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.visuallyhidden {
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
opacity: 1;
}
.modal {
height: 600px;
background: #fff;
position: absolute;
top: 0;
margin-top: 120px;
padding: 20px 0;
left: 0;
width: 100%;
z-index: 10;
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
will-change: top;
}
.base {
width: 100%;
margin: 0 auto;
position: relative;
}
.close-modal {
cursor: pointer;
position: absolute;
right: 0;
font-size: 30px;
border-radius: 100%;
-webkit-transition: all ease .3s;
transition: all ease .3s;
}
.project-gallerey {
float: left;
width: 60%;
position: relative;
}
.project-info {
float: left;
width: 32%;
margin-top: 50px;
margin-left: 35px;
padding-left: 15px;
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.8);
}
- - HTML5 & CSS3
- - jQuery
- - oo javascript
- - SEO optimization
- - cross browser compatibility
- - project management
- - DotNetNuke skinning
Комментариев нет:
Отправить комментарий