单击Vuejs从一个div到另一个div的动画 [英] Animation from one div to another div on click Vuejs

问题描述

大家为英语不好而感到抱歉。我对javaScript / ES6的使用经验很少。

Hi all sorry for the poor English. I have very little experience using javaScript/ES6.

我是Vuejs的新手，我有一个按钮，如果单击该按钮，它应该从

I am new to Vuejs I have a button in which if I click, it should start an animation of a bordered box from one div to another div which is fixed.

单击按钮

<v-btn icon @click="doSomething()">
     <v-icon>mdi-content-save-outline</v-icon>
   </v-btn>

div也可以进行动画处理或可以使用JS的一些动画也可以。

div which have to animate or can be used some animation from JS is fine as well.

<div id="divAnimation" style="border:1px solid #000000; width:50px; height:50px;"></div>

在单击时显示，在固定潜水时隐藏，

show when clicked and hide when reaced the fixed dive

应该设置动画的地方。

<div id="animationReached" style="position:fixed;top:10%;left:0">I am Fixed</div>

推荐答案

205/5000

我不知道我是否很好地理解了您的问题，但是我想您想单击按钮来切换CSS设置，对吗？如果是这样，请看下面两个根据类和内联样式更改的示例（我认为使用Jquery并不酷）：

I don't know if I understand your question well, but I think you want to toggle CSS settings on the click of a button, right? If so, look at these two examples changing by class and inline style (I think with Jquery it's not cool):

`

<template>
    <div>
        <button @click="changeStyle()">alternate 01 </button>

        <div :style="styleDiv">
            <span>
                <h1>text 01</h1>
            </span>
        </div>

        <div :class="styleDiv2">
            <span>
                <h1>text 02</h1>
            </span>
        </div>

    </div>
</template>

<script>
export default {

    data(){
        return{
            on: false,
            styleOn:{
                backgroundColor: 'green',
                width: '100%',
                height: '100%'
            },

            styleOff:{
                backgroundColor: 'gray',
                width: '50%',
                height: '50%'
            }
        }
    },

    methods:{
        changeStyle(){
            this.on = !this.on
        }
    },

    computed:{
        styleDiv(){
            return this.on ? this.styleOn : this.styleOff
        },

        styleDiv2(){
            return this.on ? 'styleOn' : 'styleOff'
        }
    }

}
</script>

<style>
    .styleOn{
        background-color: green;
        width: 100%;
        height: 100%;
    }

    .styleOff{
        background-color: gray;
        width: 50%;
        height: 50%;
    }

</style>

`

这篇关于单击Vuejs从一个div到另一个div的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！