I am looking to create a slide animation using CSS and AngularJS. I have made progress with this example: JSFiddle. The animation works smoothly on Chrome, but on Firefox, the text shakes and flickers slightly during the animation. I am struggling to pinpoint the exact issue. Any suggestions?
Code :
HTML:
<div ng-controller="animationCtrl">
<ul class='list'>
<li>
<div class="slide-animation">
<div class="slide-animation-wrap new-slide-wrap {{cssTimeInfo1}}"> <span class="text">{{valueSet1[0]}}</span>
<label class="small-label">{{valueSet2[1]}}</label>
</div>
<div class="slide-animation-wrap old-slide-wrap {{cssTimeInfo1}}"> <span class="text">{{valueSet1[1]}}</span>
<label class="small-label">{{valueSet2[1]}}</label>
</div>
</div>
</li>
</ul>
</div>
CSS :
.list > li {
box-sizing:border-box;
height: 72px;
display: inline-block;
margin-right: 1.06%;
padding: 15px;
vertical-align: top;
background-color: #f1f1f1;
-webkit-box-shadow: 0 0 7px rgba(210, 210, 210, 0.3) inset;
box-shadow: 0 0 7px rgba(210, 210, 210, 0.3) inset;
}
.small-label {
height: 24px;
display: block;
font-size: 0.714em;
margin-bottom: 0;
color: #999999;
text-transform: uppercase;
text-align: center;
}
.text {
height: 24px;
display: block;
font-size: 1.286em;
margin-bottom: 3px;
color: #666666;
text-align: center;
}
/* Slide animation */
.slide-animation {
overflow: hidden;
position: relative;
height: 40px;
}
.slide-animation-wrap {
position: relative;
width: 100%;
}
.slide-animation-wrap.new-slide-wrap {
top: -45px;
}
.slide-animation-wrap.old-slide-wrap {
top: -51px;
}
.slide-animation-wrap.slide-in-animation,
.slide-animation-wrap.slide-out-animation {
-webkit-animation: slide-outside-animation 1s linear forwards;
-o-animation: slide-outside-animation 1s linear forwards;
animation: slide-outside-animation 1s linear forwards;
}
.slide-animation-wrap:before,
.slide-animation-wrap:after {
content: " ";
display: table;
}
.slide-animation-wrap:after {
clear: both;
}
.slide-animation-wrap:before,
.slide-animation-wrap:after {
content: " ";
display: table;
}
.slide-animation-wrap:after {
clear: both;
}
@-webkit-keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
@-moz-keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
@-ms-keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
@keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
Angular :
var myApp = angular.module('myApp',[]);
myApp.controller('animationCtrl', ['$scope','$interval', function ($scope,$interval) {
$scope.valueSet1=['HGFhgfsffghfhgf','HGFhgfsffghfhgf'];
$scope.valueSet2=['ABC','ABC'];
$scope.cssTimeInfo1 = "display-none";
$scope.cssTimeInfo2 = "display-none";
var flag=0;
$interval(function(){
//0
$scope.cssTimeInfo1='slide-in-animation';
$scope.cssTimeInfo2 = "display-none";
flag++;
if(flag>1){
flag=0;
//0
$scope.cssTimeInfo1 = " ";
$scope.cssTimeInfo2 = " ";
}
else{
//1
$scope.cssTimeInfo1 = "slide-out-animation";
$scope.cssTimeInfo2 = "slide-in-animation";
}
},1000);
}]);