G
When animation is executed for the first time, you can see that all the menu items (with class) textos) have also the class animated. And when the animation is finished, you take that class away (something WOW should do on your own).It seems that it's that class that doesn't show the mneum options (although I wouldn't know how exactly). Adding that class (with the following line) into the event beforeChangeLooks like you already get the effect you're looking for:$(".textos").addClass("animated");
Here you can see it working:'use strict';
angular.module("demo", ['angular-svg-round-progressbar'])
.controller("mainCtrl", function($scope) {
$scope.clockwise = true;
$scope.color="#32db64";
$scope.current=80;
$scope.max=100;
$scope.test = function(currentAmount, options, element){
var currentVal = parseFloat(Math.round(currentAmount)).toFixed(0);
$(".valores_progreso").text( currentVal + "%");
};
new WOW().init(); //http://mynameismatthieu.com/WOW/
$(document).ready(function() {
$('.sliderMain').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay: true,
autoplaySpeed: 7000 //5000
});
$('.sliderSidebar').slick({
slidesToShow: 5,
slidesToScroll: 1,
dots: false,
centerMode: false,
focusOnSelect: true,
vertical: true,
arrows: false
});
$('.sliderMain').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('video');
if (vid.length > 0) {
$('.sliderMain').slick('slickPause');
$(vid).get(0).play();
}
//After change set it to block
$('.contenedor_nombre_proyecto').css("display", "block");
$('.textos').css("display", "block");
});
$('.sliderMain').on('beforeChange', function(event, slick, currentSlide) {
//Defore change set it to none
$('.contenedor_nombre_proyecto').css("display", "none");
$('.textos').css("display", "none");
$(".textos").addClass("animated");
$scope.$apply(function() {
$scope.current = currentSlide === 0 ? 0 : 80;
});
});
var videos = document.getElementsByTagName('video');
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('ended', myHandler, false);
}
function myHandler(e) {
console.log('Video Complete')
$('.sliderMain').slick('slickPlay');
}
});
}).valores_progreso {
font-size: 40px;
height: 5px;
font-family: 'Roboto-light', Helvetica, Arial, sans-serif;
color: #ffffff;
font-weight: 600;
}
.textos {
font-size:13px;
font-family: Helvetica, Arial, sans-serif;
}
.frase_app_proyecto {
font-size: 25px;
height: auto;
font-family: 'Roboto-light', Helvetica, Arial, sans-serif;
color: #ffffff;
font-weight: 600;
}
.contenedor_prueba {
position:absolute;
z-index:99999;
color:#ffffff;
left:50%;
top:20%;
}
.contenedor_nombre_proyecto {
position: absolute;
top: 0;
left: 0;
width: auto;
max-width: 40%;
padding: 12px 0;
background-color: #333333;
color: #ffffff;
-webkit-transform: perspective(100px) rotateX(-2deg);
-moz-transform: perspective(100px) rotateX(-2deg);
-ms-transform: perspective(100px) rotateX(-2deg);
-o-transform: perspective(100px) rotateX(-2deg);
transform: perspective(100px) rotateX(-2deg);
-webkit-transform-origin: left center;
-moz-transform: left center;
-ms-transform: left center;
-o-transform: left center;
transform: left center;
opacity: 0.9;
}
.tabla_progresos {border-collapse:collapse;border-spacing:0;width: 80%; height: 410px; max-height: 430px; margin: 0 auto;}
.tabla_progresos td{overflow:hidden;word-break:normal;}
.tabla_progresos th{overflow:hidden;word-break:normal;}
.tabla_progresos .celda_tabla_progresos{text-align:center; position: relative;}
.contenedor_tabla_progresos {
width: 100%;
height: auto;
position: absolute;
top: 20%;
left: 50%;
-webkit-transform: translate(-50%, -40%);
-moz-transform: translate(-50%, -40%);
-ms-transform: translate(-50%, -40%);
-o-transform: translate(-50%, -40%);
transform: translate(-50%, -40%);
}
.contenedor_centrado_progreso {
width: 95%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.progress-clock {
width: 100%;
top: 50%;
left: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 25px;
}<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-svg-round-progressbar/0.4.4/roundProgress.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div ng-app="demo" ng-controller="mainCtrl">
<div id="slideBox">
<!--Sidebar-->
<div id="main-image" class="sliderMain">
<div class="contenedor_carteleria_digital">
<div class="contenedor_nombre_proyecto">
<div class="nombre_proyecto_principal">
<h2 class="textos wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s">titulo</h2>
<h5 class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="1s">subtitulo</h5> <span class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="2s">holaa</span>
<p class="textos wow fadeInLeft" data-wow-duration="2s" data-wow-delay="3s">lorem ipsum dolor sit adem operca</p>
<p class="textos wow fadeInUp" data-wow-duration="2s" data-wow-delay="4s">dato 1</p>
<p class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="5s">dato 2</p>
</div>
</div>
<img class="img-responsive" src="http://www.planwallpaper.com/static/images/6768666-1080p-wallpapers.jpg">
</div>
<div class="contenedor_carteleria_digital">
<div class="contenedor_nombre_proyecto">
<div class="nombre_proyecto_principal">
<h2 class="textos wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s">titulo</h2>
<h5 class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="1s">subtitulo</h5> <span class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="2s">holaa</span>
<p class="textos wow fadeInLeft" data-wow-duration="2s" data-wow-delay="3s">lorem ipsum dolor sit adem operca</p>
<p class="textos wow fadeInUp" data-wow-duration="2s" data-wow-delay="4s">dato 1</p>
<p class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="5s">dato 2</p>
</div>
</div>
<img class="img-responsive" src="http://www.hdbloggers.net/wp-content/uploads/2016/10/Wallpapers-HD-Picture.jpg">
</div>
<div class="contenedor_carteleria_digital">
<div class="contenedor_nombre_proyecto">
<div class="nombre_proyecto_principal">
<h2 class="textos wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s">titulo</h2>
<h5 class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="1s">subtitulo</h5> <span class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="2s">holaa</span>
<p class="textos wow fadeInLeft" data-wow-duration="2s" data-wow-delay="3s">lorem ipsum dolor sit adem operca</p>
<p class="textos wow fadeInUp" data-wow-duration="2s" data-wow-delay="4s">dato 1</p>
<p class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="5s">dato 2</p>
</div>
</div>
<img class="img-responsive" src="http://www.hdbloggers.net/wp-content/uploads/2016/10/Wallpapers-HD-Picture.jpg">
</div>
<div class="contenedor_carteleria_digital">
<div class="contenedor_nombre_proyecto">
<div class="nombre_proyecto_principal">
<h2 class="textos wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s">titulo</h2>
<h5 class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="1s">subtitulo</h5> <span class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="2s">holaa</span>
<p class="textos wow fadeInLeft" data-wow-duration="2s" data-wow-delay="3s">lorem ipsum dolor sit adem operca</p>
<p class="textos wow fadeInUp" data-wow-duration="2s" data-wow-delay="4s">dato 1</p>
<p class="textos wow fadeInDown" data-wow-duration="2s" data-wow-delay="5s">dato 2</p>
</div>
</div>
<img class="img-responsive" src="http://www.hdbloggers.net/wp-content/uploads/2016/10/Wallpapers-HD-Picture.jpg">
</div>
</div>
</div>
<!--slideBox-->
</div>