jsフック関数は簡単なアニメーションを実現します.
10012 ワード
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8">
<style>
#ball {
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
}
style>
head>
<body>
<div id="app">
<input type="button" value=" " @click="flag=!flag">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div id="ball" v-show="flag">div>
transition>
div>
body>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.js">script>
<script>
let vm = new Vue({
el: "#app",
data: {//
flag: false
},
methods: {
// el
beforeEnter(el) {
el.style.transform='translate(0,0)';//
},
enter(el){
// ,
el.offsetWidth;// , el.offsetHeight
el.style.transition='all 1.5s ease';
el.style.transform='translate(150px,250px)';
},
afterEnter(el){
console.log('ok');
this.flag=false;//
}
}
});
script>
html>