Animation from one div to another div on click Vuejs

问题

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

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.

click button

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

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

Place where it should animate to.

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

回答1:

You can achieve using jquery to add the classname when you click the button, Here use the sample code,

Style

.mystyle
{padding: 25px; background-color: coral; color: white; font-size: 25px; box-sizing: border-box;}

Html Code

<button id="myDIV" onclick="myFunction()">Button Default</button>

Script

function myFunction() {
var element, name, arr;
element = document.getElementById("myDIV");
name = "mystyle";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
 element.className += " " + name;
}
}

回答2:

205/5000

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>

来源：https://stackoverflow.com/questions/59486814/animation-from-one-div-to-another-div-on-click-vuejs

标签

javascript

animation

vuejs2