单击 Vuejs 从一个 div 到另一个 div 的动画答案

【问题标题】：Animation from one div to another div on click Vuejs单击 Vuejs 从一个 div 到另一个 div 的动画
【发布时间】：2019-12-26 10:05:53
【问题描述】：

大家好，很抱歉英语不好。我使用 javaScript/ES6 的经验很少。

我是Vuejs新手

点击按钮

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

必须动画或可以使用 JS 动画的 div 也可以。

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

点击时显示，返回固定潜水时隐藏

它应该动画的地方。

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

【问题讨论】：

标签： javascript animation vuejs2

【解决方案1】：

点击按钮可以实现使用jquery添加类名，这里使用示例代码，

风格

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

HTML 代码

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

脚本

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

【讨论】：

感谢您抽出宝贵的时间来帮助我这里有三件事，一个是单击按钮，另一个是动画 div，单击按钮时会隐藏它，它会显示并移向我们已经完成的固定 div使用 jquery 请看下面的 jQuery 代码。$clonee.css({ position: 'absolute', top: $highchart.offset().top, left: $highchart.offset().left, zIndex: 99999, border: '1px solid #333' }); $('body').append($clonee);
` $clonee.animate({ left: $folder.offset().left+13, top: $folder.offset().top+8, opacity: 0.4, width: '10px' , 高度: '10px' }, 1500,'easeInOutQuint', function() { $clonee.remove(); });`

【解决方案2】：

205/5000

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

`

<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>

【讨论】：