Я пытаюсь добиться эффекта анимации следующим образом:
Когда отображается баннер, нижний правый угол следующего баннера должен быть видимым. Когда вы нажимаете на этот угол, он должен скрывать текущий баннер и показывать следующий.
Моя текущая разметка выглядит следующим образом:
<div class="banners">
<div class="image active" style="background-color: red;">
<div class="corner"></div>
</div>
<div class="image" style="background-color: blue;">
<div class="corner"></div>
</div>
</div>
CSS следующим образом: Заметьте, что я использовал clip-path для создания угла:
.banners {
width: 800px;
height: 600px;
}
.image {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.image.active {
z-index: 1;
clip-path: polygon(100% 0, 100% 65%, 60% 100%, 0 100%, 0 0);
}
.corner {
width: 50%;
height: 50%;
position: absolute;
right: 0;
bottom: 0;
}
JS:
$(document).ready(function () {
$('.corner').click(function() {
$('.image.active').removeClass('active');
$(this).parent().addClass('active');
});
});
Вот JSFiddle всего кода выше: https://jsfiddle.net/cqqxjjgu/
Одна из проблем заключается в том, что, поскольку я использую z-index, чтобы указать, что текущий "активный" баннер должен иметь приоритет, при удалении класса active он сразу отображает следующий баннер, поэтому в идеале z-index следует изменить только после завершения анимации.
Кто-нибудь знает, как я могу это добиться? В идеале мне нужно решение для кросс-браузера (не слишком беспокоиться об IE и 10).
