CSS Challenge Day 032

css-challenge-day-032.markdown

CSS Challenge Day 032

Here's my CSS Challenge for day 32. I definitely have to learn more about animation.

A Pen by Paul on CodePen.

License.

index.html

<div class="frame">
  <div class="center">
		<div class="counter">
			<div class="minus">
				<span><i class="material-icons md-red">remove_circle_outline</i></span>
			</div>
			<div class="number">
				<span class="cycle">0</span>
			</div>
			<div class="plus">
				<span><i class="material-icons md-green">add_circle_outline</i></span>
			</div>
		</div>
  </div>
</div>

script.js

// jQuery v3.3.1 is supported
const number = document.querySelector('.cycle');
const minus = document.querySelector('.minus');
const plus = document.querySelector('.plus');

let num = 0;

plus.addEventListener('click', function() {
	updateNumber(1);
	setTimeout(removeTransitionClasses, 200);
});

minus.addEventListener('click', function() {
	updateNumber(-1);
	setTimeout(removeTransitionClasses, 200);
});

function updateNumber(val) {
	num += val;
	number.classList.remove('isTransitionedUp');
	number.classList.remove('isTransitionedDown');
	
	if(val > 0) {
		number.classList.remove('isTransitionedDown');
		number.classList.add('isTransitionedUp');
		number.innerHTML = num;
	} else {
		number.classList.remove('isTransitionedUp');
		number.classList.add('isTransitionedDown');
		number.innerHTML = num;
	}	
}

function removeTransitionClasses() {
	number.classList.remove('isTransitionedUp'); 
	number.classList.remove('isTransitionedDown');
}

scripts

<script src="https://100dayscss.com/codepen/js/jquery.min.js"></script>

style.scss

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

.material-icons {
  font-family: 'Material Icons';
  font-weight: 400;
  // font-style: normal;
  font-size: 36px;  /* Preferred icon size */
  display: inline-block;
  line-height: 2;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
	padding: 4px;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
	
	&.md-red { color: rgba(255, 0, 0, 0.7); }
	
	&.md-green { color: rgba(0, 205, 0, 1); }
}

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #7F7FD5;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to top right, #91EAE4, #86A8E7, #7F7FD5);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to top right, #91EAE4, #86A8E7, #7F7FD5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.counter {
	position: absolute;
	top: -30px;
	left: -80px;
	height: 50px;
	width: 160px;
	background: #ECEFF1;
	border-radius: 1.5rem;
	box-shadow: 0px 8px 6px 1px rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.minus, 
	.plus {
		pointer-events: all;
		cursor: pointer;
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
		
		&:hover {
			animation: eminate .5s ease-out both;
		}
	}
	
	.number {
		font-family: 'Open Sans', sans-serif;
		font-weight: 600;
		font-size: 26px;
		color: #6A85A0;
		align-content: center;
		
		span {
			display: block;
			height: 30px;
			-webkit-transform-origin: 50% 50%;
			transform-origin: 50% 50%;
			overflow: hidden;
			transition: animation .3s ease-out;
			
			&.cycle.isTransitionedUp {
				-webkit-animation: UpAndGone .3s ease-out;
				animation: UpAndGone .3s ease-out;
			}
			
			&.cycle.isTransitionedDown {
				-webkit-animation: DownAndGone .3s ease-out;
				animation: DownAndGone .3s ease-out;
			}
		}
	}
}

@keyframes UpAndGone {
	0% { 
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translate3d(0, -150%, 0);
		transform: translate3d(0, -150%, 0);
		opacity: 0;
	}
}

@keyframes DownAndGone {
	0% { 
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translate3d(0, 150%, 0);
		transform: translate3d(0, 150%, 0);
		opacity: 0;
	}
}

@keyframes eminate {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	90% {
		transform: scale(1.2);
		opacity: 0;
	}
}