使用CSS在click事件上分别对每个transform属性进行动画处理

Question

I want that whenever I click on the div , it first translate , then rotate and, finally scale . Further, I want to reverse it back in the same way when I click again

I have the following code:

 $(() => { $('div').on('click', () => { $('div').toggleClass('clicked'); }); }); 

 div.normal { height: 20px; width: 100px; background: black; transition: 2s all; } div.clicked { transform: translate(100px, 100px) rotate(45deg) scale(2); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='normal'></div> 

As you can see, all the transformations are occurring at the same time. But, I want them to occur separately. How do I achieve this?

Thanks in advance!

Answer 1

Decompose your animation using keyframes. Here is a minimally edited version of your code:

 var $el = $('#to-animate') var firstClick = true $el.click(() => { $el.toggleClass('clicked') if (!firstClick) { $el.toggleClass('unclicked') } firstClick = false }) 

 div.normal { height: 20px; width: 100px; background: black; } div.clicked { animation: transforms 2s forwards; } div.unclicked { animation: transforms-2 2s reverse; } @keyframes transforms { 33% { transform: translate(100px, 100px); } 66% { transform: translate(100px, 100px) rotate(45deg); } 100% { transform: translate(100px, 100px) rotate(45deg) scale(2); } } @keyframes transforms-2 { 33% { transform: translate(100px, 100px); } 66% { transform: translate(100px, 100px) rotate(45deg); } 100% { transform: translate(100px, 100px) rotate(45deg) scale(2); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="to-animate" class='normal'></div> 

Edit updated to include ability to reverse the animation (making the code edit less minimal)

Answer 2

An idea is to rely on other properties to achieve the same effect and be able to apply different transition

 $(() => { $('div').on('click', () => { $('div').toggleClass('clicked'); }); }); 

 div.normal { height: calc(20px * var(--s,1)); width: calc(100px * var(--s,1)); background: black; position:relative; top:0; left:0; transition: 2s top 4s,2s left 4s,2s width 2s,2s height 2s,2s transform; } div.clicked { top:100px; left:100px; --s:2; transform:rotate(45deg); transition: 2s top,2s left,2s width 2s,2s height 2s,2s transform 4s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='normal'></div>