Всем привет! Столкнулась с проблемой анимации transform-origin
. Разрабатываю анимацию отрывного талона. При нажатии на синий квадрат, он принимает transform: rotate(25deg);
, но при этом не принимается плавная анимация при отделении от красной части.
Какие есть варианты для реализации плавного отрывания при клике? На данный момент при нажатии он дергается и падает вниз.
$('.cardRight').click(function() {
$(this).toggleClass("cutted");
});
/* ticket */
.cardWrap {
cursor: pointer;
position: relative;
font-family: sans-serif;
margin: 0 auto;
display: flex;
border-radius: 8px;
}
.cardLeft {
width: 400px;
border-right: 18em dashed #fff;
border-radius: 8px 0 0 8px;
border: 1px solid black;
height: 250px;
background: red;
color: white;
font-size: 24px;
text-align: center;
}
.cardRight {
width: 25%;
border-left: .18em dashed #fff;
border-radius: 0 8px 8px 0;
border: 1px solid black;
height: 250px;
background: blue;
color: white;
}
.cardSingle {
width: 100%;
border-right: .18em dashed #fff;
border-radius: 8px 0 0 8px;
}
.cardWrap .form-group {
height: 0;
overflow: hidded;
opacity: 0;
}
.cardRight h1 {
opacity: 0;
text-align: center;
}
.cardRight,
.cardRight * {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cardRight.cutted {
-ms-transform: rotate(25deg);
-ms-transform-origin: 0% 100%;
-webkit-transform: rotate(25deg);
-webkit-transform-origin: 0% 100%;
transform: rotate(25deg);
transform-origin: 00% 100%;
}
.cutted .cardRight h1 {
opacity: 1;
}
.cardWrap.list {
cursor: default;
}
.cardWrap.list .cardLeft .btn-group {
padding: 16px 0 0;
}
.cardWrap.list .cardLeft {
width: 65%;
}
.cardWrap.list .cardRight {
width: 35%;
}
.cardWrap.list .card {
min-height: 190px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="eventstage-6" class="cardWrap cleared" data-tt-widget-trigger="toggleStage" data-tt-stageid="6">
<div class="card cardLeft">
<span class="ticket-parts"></span> ---- Book NOW! ----
</div>
<div class="card cardRight">
CLICK!
<span class="ticket-parts"></span>
<div class="card-top">
<h1>BOOKED!</h1>
</div>
</div>
</div>
Cпасибо.