Я хочу сделать слайд-анимацию с помощью CSS и Angular Js. Я согласен с этим: JSFiddle On chrome эта анимация работает безупречно. Но текст Firefox немного дрожит и мерцает, когда анимация продолжается. Я не могу точно определить проблему. Есть идеи..
Код:
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);
}
}
Угловая:
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);
}]);
У меня был текст, мерцающий вопрос в Firefox с преобразованиями. Добавление
backface-visibility: hidden;
к преобразованному элементу была исправлена проблема для меня.