Skip to content
Permalink
Browse files

duplication animation

Signed-off-by: EdwardBock <edward.bock@palasthotel.de>
  • Loading branch information...
EdwardBock committed May 7, 2019
1 parent c114e14 commit 01cfc66606f8d4715481a35c0c5fd67819226a6c
Showing with 33 additions and 2 deletions.
  1. +10 −1 js/app/GridModels.js
  2. +5 −0 js/app/GridViews.js
  3. +6 −0 scss/2_Module/_grid-box.scss
  4. +3 −1 scss/grid-backend.scss
  5. +9 −0 scss/no-output/_animations.scss
@@ -161,7 +161,7 @@ var Grid = GridBackbone.Model.extend({
GridRequest.box.create(clone, {
index: toIndex,
success: function(){
clone.set("isDuplicated", true);
clone.setDuplicated();
box.getSlot().addBox(clone, toIndex);
}
});
@@ -299,6 +299,15 @@ var Slot = GridBackbone.Model.extend({
}
});
var Box = GridBackbone.Model.extend({
unsetDuplicated: function(){
this.unset("isDuplicated");
},
setDuplicated: function(){
this.set("isDuplicated", true);
},
isDuplicated: function(){
return this.get("isDuplicated") === true;
},
getGrid: function(){
return this.get("parent").getGrid();
},
@@ -264,6 +264,11 @@ var BoxView = GridBackbone.View.extend({
json.prolog = json.prolog.replace(SCRIPT_REGEX, "");
}

if(this.model.isDuplicated()){
this.model.unsetDuplicated();
this.$el.addClass("is-duplicated");
}

this.$el.html(ich.tpl_box( json ));
return this;
},
@@ -19,6 +19,12 @@
padding: 0 10px;
word-break:break-all;
}

&.is-duplicated{
animation-name:background-falsh;
animation-duration: 1s;
animation-timing-function: ease-out;
}
}
.grid-box + .grid-box{
margin-top: 10px;
@@ -1,4 +1,6 @@
@import "no-output/*";
@import "no-output/no-output";
@import "no-output/mixins";
@import "no-output/animations";

@import "0_Base/*";

@@ -10,3 +10,12 @@
40% {transform: translateY(-15px);}
60% {transform: translateY(-7px);}
}

@keyframes background-falsh {
0% {
background-color: rgba(58,197,217,1);
}
100% {
background-color: rgba(58,197,217,0);
}
}

0 comments on commit 01cfc66

Please sign in to comment.
You can’t perform that action at this time.