<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="app" id="app">
<div class="container">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h4>Transition Group Animations</h4>
<hr/>
<div class="btn btn-primary" @click="addItem">Add Item</div><br/><br/>
<div class="contain">
<transition-group name="fade">
<div class="contain-item" v-for="(number, index) in numbers" v-bind:key="number" @click="removeItem(index)" style="cursor: pointer;">{{index}}</div>
</transition-group>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Vue.component('app-danger-alert', {
template: "<div class='alert alert-danger'>Danger!</div>"
})
Vue.component('app-success-alert', {
template: "<div class='alert alert-success'>Success!</div>"
})
new Vue({
el: "#app",
data: {
show: true,
load: true,
elementWidth: 300,
selected: 'app-success-alert',
numbers: [1, 2, 3, 4, 5]
},
mounted: function() {
this.$nextTick(function() {
this.gimmeStyle();
})
},
methods: {
gimmeStyle() {
setTimeout(function() {
$(".contain-item").each(function(index) {
if ($(this)[0].style.backgroundImage == "")
{
var r = Math.floor(Math.random() * 4);
if (r == 0)
{
$(this).css("background", "linear-gradient(135deg, #CE9FFC 10%, #7367F0 100%)")
}
else if (r == 1)
{
$(this).css("background", "linear-gradient(135deg, #81FBB8 10%, #28C76F 100%)")
}
else if (r == 3)
{
$(this).css("background", "linear-gradient(135deg, #ABDCFF 10%, #0396FF 100%)")
}
else
{
$(this).css("background", "linear-gradient(135deg, #FFE985 10%, #FA742B 100%)")
}
}
})
}, 10)
},
addItem: function() {
this.numbers.splice(0, 0, this.numbers.length + 1)
},
removeItem: function(num) {
this.numbers.splice(num, 1);
}
},
watch: {
numbers: function() {
this.gimmeStyle()
}
}
});
setTimeout(function() {
var button = document.querySelector(".btn-primary")
button.click();
}, 400)
setTimeout(function() {
var button = document.querySelector(".btn-primary")
button.click();
}, 1200)
setTimeout(function() {
var button = document.querySelector(".btn-primary")
button.click();
}, 2000)
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
body {
margin-top: 50px;
font-family: "Source Code Pro", monospace;
}
.container {
margin: 0;
padding: 0;
}
.contain {
width: 100vw;
position: relative;
}
.contain span {
width: 100%;
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
.contain-item {
margin: 1vw;
width: 30vw;
height: 30vw;
border-radius: 15px;
box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.08), 0px 6px 18px 0px rgba(0, 0, 0, 0.05);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(0px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
font-weight: bold;
font-size: 2.3rem;
}
.contain-item:hover {
transform: translateY(-5px);
}
.contain-item:hover:after {
content: "";
position: absolute;
top: 20px;
width: 2px;
right: 11%;
height: 30px;
background-color: white;
transform: rotate(45deg);
opacity: .8;
}
.contain-item:hover:before {
content: "";
position: absolute;
top: 20px;
right: 11%;
width: 2px;
height: 30px;
background-color: white;
transform: rotate(-45deg);
opacity: .8;
}
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: all 1s;
}
.fade-leave-active {
transition: all .3s;
opacity: 0;
transform: translateY(0);
position: absolute;
}
.fade-move {
transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(1) {
transition: transform 0.4s 0.1s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(2) {
transition: transform 0.4s 0.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(3) {
transition: transform 0.4s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(4) {
transition: transform 0.4s 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(5) {
transition: transform 0.4s 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(6) {
transition: transform 0.4s 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(7) {
transition: transform 0.4s 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(8) {
transition: transform 0.4s 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(9) {
transition: transform 0.4s 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(10) {
transition: transform 0.4s 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(11) {
transition: transform 0.4s 1.1s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(12) {
transition: transform 0.4s 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(13) {
transition: transform 0.4s 1.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(14) {
transition: transform 0.4s 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.fade-move:nth-child(15) {
transition: transform 0.4s 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}