修复 Carousel FlexBox 上的动画

Question

我在我的网站上使用这个：

http://www.andismith.com/blog/2012/05/css3-flexbox-carousel/

当我点击它滑动/动画一个框向右或向左时，我更改了代码使其一次点击 4 张幻灯片！

我面临的问题是：不知道在哪里以及如何修复的动画故障。

这里是网站：http://urbanphenomena.net/ 在“项目”部分。

这是轮播的代码：

var carousel = (function(){

    var container = document.getElementById('carousel'),
        items = container.getElementsByTagName('ul')[0];

    var active = 0, // the active item (sits far left)
        properties = {}, // used to calculate scroll distance
        animating = false; // whether the carousel is currently animating

    // use Modernizr.prefixed to get the prefixed version of boxOrdinalGroup
    var boxOrdinalGroup = Modernizr.prefixed( 'boxOrdinalGroup' );

    // list of the end event names in different browser implementations
    var transEndEventNames = {
           'WebkitTransition' : 'webkitTransitionEnd',
           'MozTransition'    : 'transitionend',
           'OTransition'      : 'oTransitionEnd',
           'msTransition'     : 'MsTransitionEnd',
           'transition'       : 'transitionend'
        };

    // use Modernizr.prefixed to work out which one we need
    var transitionEnd = transEndEventNames[ Modernizr.prefixed('transition') ];


    function move(e) {
        // prevent the click action
        e.preventDefault();

        // check if the carousel is mid-animation
        if (!animating) {

            // get the event's source element
            var target = e.target || e.srcElement;

            // find out if we are moving next or previous based on class
            var next = target.classList.contains( 'next' );

            var margin = 0;//= parseInt(items.style.marginLeft) || 0;

            // allow our carousel to animate
            container.classList.add( 'animate' );
            animating = true;

            if (next) {

                margin = -( ( properties.width*2 )+ properties.marginRight );

                if ( active < items.children.length - 1 ) {
                    active+=4;
                } else {
                    active = 0;
                }
            } else {

                margin = properties.marginRight;

                if ( active > 0 ) {
                    active-=4;
                } else {
                    active = items.children.length - 1;
                }
            }

            items.style.marginLeft = margin + 'px';
        }


    }

    function complete() {
        if ( animating ) {
            animating = false;

            // this needs to be removed so animation does not occur when the ordinal is changed and the carousel reshuffled
            container.classList.remove( 'animate' );

            // change the ordinal
            changeOrdinal();

            // change the margin now there are a different number of items off screen
            items.style.marginLeft = -( properties.width ) + 'px';
        }
    }


    function changeOrdinal() {

        var length = items.children.length, 
            ordinal = 0;

        // start at the item BEFORE the active one.
        var index = active-1;

        /* if the active item was 0, we're now at -1 so
            set to the last item */
        if (index < 0) {
            index = length-1;
        }

        // now run through adding the ordinals
        while ( ordinal < length ) {
            // add 1 to the ordinal - ordinal cannot be 0.
            ordinal++;

            // check the item definetely exists :)
            var item = items.children[index];
            if ( item && item.style ) {
                // new ordinal value
                item.style[boxOrdinalGroup] = ordinal;
            }

            /* as we are working from active we need to go back to
               the start if we reach the end of the item list */
            if ( index < length-1 ) {
                index++;
            } else {
                index = 0;
            }

        }

    }

    return {
        init: function() {

            var navigation = document.querySelectorAll( 'a.navigation' );
            var length = navigation.length;

            // add an event listener to each navigation item
            var i = 0;
            while (i < length) {
                navigation[i].addEventListener( 'click' , move );
                i++;
            }

            // event listener for end of a transition
            items.addEventListener( transitionEnd, complete );

            // get initial width and margin
            if (items.children.length > 0) {

                var itemStyle = window.getComputedStyle( items.children[0], null ) || items.children[0].currentStyle;

                properties = {
                    width: parseInt( itemStyle.getPropertyValue( 'width' ), 10 ),
                    marginRight: parseInt( itemStyle.getPropertyValue( 'margin-right' ), 10 )
                };

            }

            // set the initial ordinal values
            changeOrdinal();

        }()

    }


})();

CSS：

#carousel {
    margin:40px 20px;
    overflow:hidden;
    padding:0;
    position:relative;
    width:auto;
}

/* navigation items */
#carousel .navigation {
    background:rgba(0,0,0,0.3);
    color:rgba(255,255,255,0.8);
    display:block;
    font-size:3em;
    margin-top:6.2em;
    position:absolute;
    text-align:center;
    text-shadow:rgba(0,0,0,0.1); 0 0 2px;
    width:50px;
    -moz-transition:all 0.4s;
    -ms-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    -o-transition:all 0.4s;
    transition:all 0.4s;
    text-decoration: none;
}

#carousel:hover .navigation {
    background:rgba(0,0,0,0.3);
    color:rgba(255,255,255,0.8);
    text-shadow:rgba(0,0,0,0.7); 0 0 2px;
}

#carousel .navigation:hover {
    background:rgba(0,0,0,0.5);
}

#carousel .previous {
    left:0;
}

#carousel .next {
    right:0;
}

/* carousel container */
#carousel ul {
    -moz-box-orient:horizontal;
    -ms-box-orient:horizontal;
    -webkit-box-orient:horizontal;
    -o-box-orient:horizontal;
    box-orient:horizontal;

    display:-moz-box;
    display:-ms-box;
    display:-webkit-box;
    display:-o-box;
    display:box;

    list-style-type:none;
    margin:5px;
    margin-left:-200px;
    padding:0;
}

/* standard width and height for the carousel items */
#carousel li {
    height:550px;
    margin-right:10px;
    width:300px;
    -webkit-filter: grayscale(90%); /* Safari 6.0 - 9.0 */
    filter: grayscale(90%);
}

/* animation properties for the carousel */
.animate ul {
    -moz-transition:margin 0.5s;
    -ms-transition:margin 0.5s;
    -webkit-transition:margin 0.5s;
    -o-transition:margin 0.5s;
    transition:margin 0.5s;
}

/* different color for each of our items */

#carousel li:nth-child(1) { /* Architecture */

}

#carousel li:nth-child(2) { /* SPS Jeddah */
    background-image: url('../imgs/cover/sps.jpg');
    background-size: cover;
    background-repeat: no-repeat;

}

#carousel li:nth-child(3) { /* Steak House */
    background-image: url('../imgs/cover/STH%20Restaurant.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(4) { /* Sari Street Business Units */
    background-image: url('../imgs/cover/SariStreetBusinessUnits.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(5) { /* SPS Riyadh */
    background-image: url('../imgs/cover/spsriyadh.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(6) { /* Madina Road */
    background-image: url('../imgs/cover/madinahroadofficepark.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(7) { /* Echole */
    background-image: url('../imgs/cover/ecolefrancaise.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(8) { /* Khaldiyyah */
    background-image: url('../imgs/cover/khaldeyyahbusinessunits.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(9) { /* Inmaeiya sales center */
    background-image: url('../imgs/cover/inmaeya.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(10) { /* Al-Rabwah Apartments */
    background-image: url('../imgs/cover/tarabzoni.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(11) { /* Wesal */
    background-image: url('../imgs/cover/wesal.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(12) { /* Interior */

}

#carousel li:nth-child(13) { /* Wakame */
    background-image: url('../imgs/cover/wakame.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(14) { /* MTS */
    background-image: url('../imgs/cover/mts.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(15) { /* Hamza */
    background-image: url('../imgs/cover/hamza.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(16) { /* Meraki */
    background-image: url('../imgs/cover/meraki.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(17) { /* Tarhati */
    background-image: url('../imgs/cover/tarhati.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(18) { /* Baytoti */
    background-image: url('../imgs/cover/baytoti.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
#carousel li:nth-child(19) { /* Micro Architecture */

}

#carousel li:nth-child(20) { /* Hafiz */
    background-image: url('../imgs/cover/hafiz.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(21) { /* Muhaideb */
    background-image: url('../imgs/cover/mts.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(22) { /* Graphic Identities */

}

#carousel li:nth-child(23) { /* MHS */
    background-image: url('../imgs/cover/shukri.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(24) { /* BQ CI */
    background-image: url('../imgs/cover/bq.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(25) { /* Meraki CI */
    background-image: url('../imgs/cover/meraki2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(26) { /* Wayfinding */

}

#carousel li:nth-child(27) { /* BQ Office */
    background-image: url('../imgs/cover/bq2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#carousel li:nth-child(28) { /* TA-Schools */
    background-image: url('../imgs/cover/tas.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

Answer 1

我明白了。是这样的：

properties = {
   width: parseInt( itemStyle.getPropertyValue( 'width' ), 20 ),
   marginRight: parseInt( itemStyle.getPropertyValue( 'margin-right' ), 20 )
};