Why direction nav transition not working on Flexslider module?

Question

I am using the following modules: Flexslider module (version flexslider 2.2), FlexSlider Views Slideshow Module and Views, in Drupal 7.

I build the slideshow, and define the Direction Nav (prev / next).

when I looked at the demo of the flexslider, I saw that these is a transition to the arrows when they are appearing and disappearing- it looks they are coming from the sides when I hover, and they going out when I stop hover.

unfortunately, I don't see any transition on my slider, and the the arrow just appear and disappear.

When I checked, I notice that the problem is that when I stop hovering, and then immediately hover again, I see that the transition is in fact happening, but it's only visible if I hover immediately again.

Does someone know what is the problem and can you help me solve this issue?

here is the direction nav code:

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }        

/* Direction Nav */
    .flex-direction-nav {*height: 0;}
    .flex-direction-nav a  { display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
    .flex-direction-nav .flex-prev { left: -50px; }
    .flex-direction-nav .flex-next { right: -50px; text-align: right; }
    .flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
    .flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
    .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
    .flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; }
    .flex-direction-nav a.flex-next:before  { content: '\f002'; }

Answer 1

I see the same issue sometimes. When I look at my local direction anchors, they are display:none by default, but the WooThemes example they are display:block. Also, obviously, the opacity and left/right css3 transitions don't work.

In Chrome you can test the :hover selector on the .flexslider element.

I have seen this work properly in some sites.

It looks like there's a responsive breakpoint at 860px that you need to consider, so I placed these styles at min-width:861px. If you make these styles the default, the arrows will always be visible under 860px. This is why I put the styles at 861 and above.

Anyway, my approach to 'fixing' this was to simply reinforce the display, opacity, left/right, and transition settings in my theme CSS. Not sure if all of this is necessary, but it does work :)

/** Media Queries: min 861 only Flexslider
------------------------------*/
@media (min-width: 861px) {
    .flex-direction-nav .flex-prev {
        -webkit-transition-property:left, opacity;
        -moz-transition-property:left, opacity;
        -o-transition-property:left, opacity;
        transition-property:left, opacity;
        -webkit-transition-duration:0.3s;
        -moz-transition-duration:0.3s;
        -o-transition-duration:0.3s;
        transition-duration:0.3s
    }
    .flex-direction-nav .flex-next {
        -webkit-transition-property:right, opacity;
        -moz-transition-property:right, opacity;
        -o-transition-property:right, opacity;
        transition-property:right, opacity;
        -webkit-transition-duration:0.3s;
        -moz-transition-duration:0.3s;
        -o-transition-duration:0.3s;
        transition-duration:0.3s
    }
    div.flexslider .flex-direction-nav a {
        display:block
    }
}