0

我正在将我的网站升级为带有 Vue 的单页应用程序。我有一个以前运行的 JS 脚本，可以将几张图片设置为旋转以显示所选图片的立方体的面。但是，当我将所有内容都放在 Vue div 中时，代码停止工作。我相信这是因为 Vue 接管了渲染该 div 内所有内容的控制权，尽管我可能错了。

我的html：

<div id="app">
<!--top of page-->
   <section id="options">
        <div class="show-buttons" id="dropdown-buttons">
            <button onclick="activeButton(0);activeButton2(0)" class="show-front active_project">Image1</button>
            <button onclick="activeButton(1);activeButton2(1)" class="show-back">Image2</button>
            <button onclick="activeButton(2);activeButton2(2)" class="show-right">Image3</button>
            <button onclick="activeButton(3);activeButton2(3)" class="show-left">Image4</button>
            <button onclick="activeButton(4);activeButton2(4)" class="show-top">Image5</button>
            <button onclick="activeButton(5);activeButton2(5)" class="show-bottom">Image6</button>
            <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="responsiveButtons()">&#9776;</a>
        </div>
    </section>
    <section class="card-container">
        <div id="card">
            <figure id="project1" class="fadeIn active_description animated">
                <p>Description1</p>
            </figure>
            <figure id="project2">
                <p>Description2</p>
            </figure>
            <figure id="project3">
                <p>Description3</p>
            </figure>
            <figure id="project4">
                <p>Description4</p>
            </figure>
            <figure id="project5">
                <p>Description5</p>
            </figure>
            <figure id="project6">
                <p>Description6</p>
            </figure>
        </div>
    </section>
<!--rest of page-->
</div>

Vue JS：

document.addEventListener("DOMContentLoaded", function() {
    var app = new Vue({
        el: '#app',
        data: {
            //data
        },
        methods: {
            //methods

        },

    });

});

图片动画JS：

var descriptions = [
     document.getElementById('project1'),
     document.getElementById('project2'),
     document.getElementById('project3'),
     document.getElementById('project4'),
     document.getElementById('project5'),
     document.getElementById('project6'),
    ];

    var projectButtons = [
      document.getElementsByClassName('show-front'),
      document.getElementsByClassName('show-back'),
      document.getElementsByClassName('show-right'),
      document.getElementsByClassName('show-left'),
      document.getElementsByClassName('show-top'),
      document.getElementsByClassName('show-bottom'),
    ];

    function activeButton(num) {
      document.getElementsByClassName('active_project')[0].classList.remove('active_project');
      projectButtons[num][0].classList.add('active_project');
      document.getElementsByClassName('active_description')[0].classList.remove('fadeIn');
      document.getElementsByClassName('active_description')[0].classList.remove('animated');
      document.getElementsByClassName('active_description')[0].classList.remove('active_description');
      descriptions[num].classList.add('fadeIn');     // Add 'active' classnames to the current page
      descriptions[num].classList.add('animated');
      descriptions[num].classList.add('active_description');
    }

    var descriptions2 = [
     document.getElementById('alt-project1'),
     document.getElementById('alt-project2'),
     document.getElementById('alt-project3'),
     document.getElementById('alt-project4'),
     document.getElementById('alt-project5'),
     document.getElementById('alt-project6'),
    ];

    function activeButton2(num) {
      document.getElementsByClassName('alt_active_description')[0].classList.remove('fadeIn');
      document.getElementsByClassName('alt_active_description')[0].classList.remove('animated');
      document.getElementsByClassName('alt_active_description')[0].classList.remove('alt_active_description');
      descriptions2[num].classList.add('fadeIn');     // Add 'active' classnames to the current page
      descriptions2[num].classList.add('animated');
      descriptions2[num].classList.add('alt_active_description');
    }

    function responsiveButtons() {
        var x = document.getElementById("dropdown-buttons");
        if (x.className === "show-buttons") {
            x.className += " responsive";
        } else {
        x.className = "show-buttons";
        }
    }

        var init = function() {
            var box = document.querySelector('.cube-container').children[0],
            showPanelButtons = document.querySelectorAll('#dropdown-buttons button'),
            panelClassName = 'show-front',

            onButtonClick = function( event ){
                box.removeClassName( panelClassName );
                panelClassName = event.target.className;
                box.addClassName( panelClassName );
            };

            for (var i=0, len = showPanelButtons.length; i < len; i++) {
                showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
            }
            
        };
    window.addEventListener( 'DOMContentLoaded', init, false);

CSS：

 .cube-container {
        width: 270px;
        height: 180px;
        -webkit-perspective: 2000px;
        -moz-perspective: 2000px;
        -o-perspective: 2000px;
        perspective: 2000px;
    }
    #box .front,
    #box .back {
        width: 270px;
        height: 180px;
    }
    #box .right,
    #box .left {
        width: 180px;
        height: 180px;
        left: 45px;
    }
    #box .top,
    #box .bottom {
        width: 270px;
        height: 180px;
    }
    #frame {
        width: 671px;
        height: 445px;
    }
    #box .front {
        -webkit-transform: translateZ( 90px);
        -moz-transform: translateZ( 90px);
        -o-transform: translateZ( 90px);
        transform: translateZ( 90px);
    }
    #box .back {
        -webkit-transform: rotateX( -180deg) translateZ( 90px);
        -moz-transform: rotateX( -180deg) translateZ( 90px);
        -o-transform: rotateX( -180deg) translateZ( 90px);
        transform: rotateX( -180deg) translateZ( 90px);
    }
    #box .right {
        -webkit-transform: rotateY( 90deg) translateZ( 135px);
        -moz-transform: rotateY( 90deg) translateZ( 135px);
        -o-transform: rotateY( 90deg) translateZ( 135px);
        transform: rotateY( 90deg) translateZ( 135px);
    }
    #box .left {
        -webkit-transform: rotateY( -90deg) translateZ( 135px);
        -moz-transform: rotateY( -90deg) translateZ( 135px);
        -o-transform: rotateY( -90deg) translateZ( 135px);
        transform: rotateY( -90deg) translateZ( 135px);
    }
    #box .top {
        -webkit-transform: rotateX( 90deg) translateZ( 90px);
        -moz-transform: rotateX( 90deg) translateZ( 90px);
        -o-transform: rotateX( 90deg) translateZ( 90px);
        transform: rotateX( 90deg) translateZ( 90px);
    }
    #box .bottom {
        -webkit-transform: rotateX( -90deg) translateZ( 90px);
        -moz-transform: rotateX( -90deg) translateZ( 90px);
        -o-transform: rotateX( -90deg) translateZ( 90px);
        transform: rotateX( -90deg) translateZ( 90px);
    }
    #box.show-front {
        -webkit-transform: translateZ( -90px);
        -moz-transform: translateZ( -90px);
        -o-transform: translateZ( -90px);
        transform: translateZ( -90px);
    }
    #box.show-back {
        -webkit-transform: translateZ( -90px) rotateX( -180deg);
        -moz-transform: translateZ( -90px) rotateX( -180deg);
        -o-transform: translateZ( -90px) rotateX( -180deg);
        transform: translateZ( -90px) rotateX( -180deg);
    }
    #box.show-right {
        -webkit-transform: translateZ( -135px) rotateY( -90deg);
        -moz-transform: translateZ( -135px) rotateY( -90deg);
        -o-transform: translateZ( -135px) rotateY( -90deg);
        transform: translateZ( -135px) rotateY( -90deg);
    }
    #box.show-left {
        -webkit-transform: translateZ( -135px) rotateY( 90deg);
        -moz-transform: translateZ( -135px) rotateY( 90deg);
        -o-transform: translateZ( -135px) rotateY( 90deg);
        transform: translateZ( -135px) rotateY( 90deg);
    }
    #box.show-top {
        -webkit-transform: translateZ( -90px) rotateX( -90deg);
        -moz-transform: translateZ( -90px) rotateX( -90deg);
        -o-transform: translateZ( -90px) rotateX( -90deg);
        transform: translateZ( -90px) rotateX( -90deg);
    }
    #box.show-bottom {
        -webkit-transform: translateZ( -90px) rotateX( 90deg);
        -moz-transform: translateZ( -90px) rotateX( 90deg);
        -o-transform: translateZ( -90px) rotateX( 90deg);
        transform: translateZ( -90px) rotateX( 90deg);
    }
4

0 回答 0