fabioluzm · October 21, 2019 22:02
diff --git a/css-transitions.markdown b/css-transitions.markdown
diff --git a/index.pug b/index.pug
 .trigger
  .box
diff --git a/script.js b/script.js
 $('.trigger').on('click', function(){
  $(this).toggleClass('clicked');
 });
diff --git a/scripts b/scripts
 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
diff --git a/style.sass b/style.sass
 body
  padding: 50px
  
 .trigger
  width: 200px
  height: 200px
  border: 20px solid #999
  background: #ddd
  
 .box
  display: inline-block
  background: pink
  width: 200px
  height: 200px
  transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97)
  pointer-events: none
 .trigger.clicked .box
  transform: translate(200px, 150px) rotate(20deg)
	body
	padding: 50px

	.trigger
	width: 200px
	height: 200px
	border: 20px solid #999
	background: #ddd

	.box
	display: inline-block
	background: pink
	width: 200px
	height: 200px
	transition: transform 300ms cubic-bezier(0, 0.47, 0.32, 1.97)
	pointer-events: none
	.trigger.clicked .box
	transform: translate(200px, 150px) rotate(20deg)