javascript - 如何使用 css 和 javascript 让引导卡翻转并保持翻转状态？

Question

我正在使用 Vue、css 和 JavaScript。当我按住按钮时，我可以让特定的卡片翻转，但所需的行为是当按下按钮（不按住）时卡片会翻转并露出卡片的背面，然后从背面按下按钮，您可以再次将卡翻转到前面。我曾尝试仅使用 Vue 和 css 实现此功能，但无法完成，因此我决定使用 vanilla Javascript 并使用onclickevent. 我有直觉认为是我的 css 导致了这个问题，但我已经做了很多实验，但无法弄清楚。帮助或建议将不胜感激，只希望使用 Vue、vanilla JavaScript 和 css。我是 Vue 和 css 动画/过渡的新手。

new Vue({
    el: "#CardsApp",
    data: {
        cards: [],
        isFetchingData: false
       
        
    },
    created: function() {
        this.isFetchingData = true;
        let vm = this;

        axios.get("http://localhost:52007/api/cards")
            .then(response => {
                vm.cards = response.data.slice()
                vm.isFetchingData = false;
            })
    }
    
})

.card-title {
    font-family: getSchwifty, sans-serif;
    font-size: 1.6rem;
    color: greenyellow;
    text-align: center;
}

.card-text {
    font-size: 1.2rem;
}

#loadingImg {
  
    margin-bottom: 30vmin;
}

.card-flip {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.card-flip:active .flip, .card-flip.active .flip {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.card-flip,
.front,
.back {
    width: 100%;
    height: 38rem;
}

.flip {
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

.front,
.back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

<div id="CardsApp" v-cloak>


    <div class="container">
        <img id="loadingImg" v-if="isFetchingData" src="../../images/loading.gif" class="img-fluid mx-auto d-block" alt="Loading" />

    </div>


    <section>
        <div class="container">
            <div class="row">
                <div v-for="card in cards" class="col-sm-6 col-lg-4">
                    <!-- Card Flip -->
                    <div class="card-flip">
                        <div class="flip">
                            <div class="front">
                                <!-- front content -->
                                <div class="card border-success text-white  bg-dark mb-5" style="max-width: 20rem;">
                                    <img class="card-img-top" src="/images/SquanchyCardLogo.jpg" alt="Card image cap" style="display: block;" data-holder-rendered="true">

                                    <div class="card-body">
                                        <h5 class="card-title text-center">Cards For Squanchies</h5>
                                        <p class="card-text text-center" style="min-height: 7rem">{{card.frontText}}</p>
                                    </div>

                                    <div class="card-footer">
                                        <small class="text-muted">Card No. {{card.id}}</small>
                                        <button onclick="isFlipped()" type="button" class="btn btn-outline-warning btn-sm float-right">Flip this biaatch back!</button>
                                    </div>

                                </div>
                            </div>


                            <div class="back">
                                <!-- back content -->
                                <div class="card border-success text-white  bg-dark mb-5" style="max-width: 20rem;">
                                    <img class="card-img-top" src="/images/SquanchyCardLogo.jpg" alt="Card image cap" style="display: block;" data-holder-rendered="true">

                                    <div class="card-body">
                                        <h5 class="card-title text-center">Cards For Squanchies</h5>
                                        <p class="card-text text-center" style="min-height: 7rem">{{card.backText}}</p>
                                    </div>

                                    <div class="card-footer">
                                        <small class="text-muted">Card No. {{card.id}}</small>
                                        <button onclick="isFlipped()" type="button" class="btn btn-outline-warning btn-sm float-right">Flip this biaatch back!</button>
                                    </div>

                                </div>
                            </div>


                        </div>
                    </div>
                    <!-- End Card Flip -->
                </div>
            </div>
        </div>
    </section>


    <!-- CardsApp ends-->
</div>

<script type="text/javascript" src="~/Scripts/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../../Vue/vue-cards.js"></script>

<script type="text/javascript">
    function isFlipped() {
        document.querySelector(".card-flip").classList.toggle("flip");
        console.log('Inside isFLipped function')
    }
</script>

标签： javascripthtmlcsscss-selectorsvuejs2