Why transitions
CSS Transitions
#elementId{
transition-property: box-shadow;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
Or
transition: box-shadow 1s linear 2s;
timing function
linear|ease|ease-in|ease-in-out|ease-out
See the Pen Bqljv by Alaeddin Nassani (@an83) on CodePen.
Animations & @keyframes
@keyframes NAME-YOUR-ANIMATION {
0% { font-size: 10px; }
30% { font-size: 15px; }
100% { font-size: 12px; }
}
#elementID {
animation-name: NAME-YOUR-ANIMATION;
animation-duration: 10s;
...
}
See the Pen eJaGq by Alaeddin Nassani (@an83) on CodePen.
Regions
Summary
- Animations bring life to your website
- CSS3 shapes and regions make content cool
ECMAscript 6 Main features
- Block-scoped variables
- deconstructing
- classes
- modules
- template
- library
- for-of loop
Block-scoped variables (var vs. let)
function order(){
if (x > y) {
var temp = x;
x = y;
y = temp;
}
console.log(temp === x); //true
return [x, y];
}
function order(){
if (x > y) {
let temp = x;
x = y;
y = temp;
}
console.log(temp === x); //ReferenceError: tmp is not defined
return [x, y];
}
Deconstructing
Objects
let obj = { first: 'Jane', last: 'Doe' };
let { first: f , last: l } = obj;
console.log(f + ' ' + l); // Jane Doe
Arrays
let [x, y] = [ 'a', 'b' ]; // x='a', y='b'
let [x, y, ...rest] = [ 'a', 'b', 'c', 'd' ]; // x='a', y='b', rest = [ 'c', 'd' ]
[x,y] = [y,x]; // swap values
Arrow functions
let squares = [1, 2, 3].map(function (x) {return x * x});
let squares = [1, 2, 3].map(x => x * x);
lexical this
//ES5
function Person() {
this.age = 0;
var that = this;
setInterval(function growUp() {
that.age++;
}, 1000);
}
//ES6
function Person(){
this.age = 0;
setInterval(() => {
this.age++;
}, 1000);
}
...
rest parameters
function func2(arg0, ...others) {
return others;
}
> func2(0, 1, 2, 3)
[1, 2, 3]
> func2(0)
[]
> func2()
[]
spread parameters
> Math.max(7, 4, 11)
11
> Math.max(...[7, 4, 11])
11
classes
//ES5
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '('+this.x+', '+this.y+')';
};
//ES6
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '('+this.x+', '+this.y+')';
}
}
Inheritance
//ES5
function ColorPoint(x, y, color) {
Point.call(this, x, y);
this.color = color;
}
ColorPoint.prototype = Object.create(Point.prototype);
ColorPoint.prototype.constructor = ColorPoint;
ColorPoint.prototype.toString = function () {
return this.color+' '+Point.prototype.toString.call(this);
}
//ES6
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // same as super.constructor(x, y)
this.color = color;
}
toString() {
return this.color+' '+super();
}
}
modules
// lib/math.js
let notExported = 'abc';
export function square(x) {
return x * x;
}
export const MY_CONSTANT = 123;
// main.js
import {square} from 'lib/math';
console.log(square(3));
// or
import 'lib/math' as math;
console.log(math.square(3));