The same hook function in the condition of the vue animation rendering/conditions to show the result-CodePudding

Code:

<meta charset="utf-8"/& gt;

<script SRC="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" & gt; </script>
<style>
HTML,
Body {
Padding: 0 px;
margin: 0px;
}
</style>

<body>

@ before - enter="beforeEnter
"@ enter="enter"
@ after - enter="afterEnter
">

: style="{height: '20 px, width:' 20 px ', 'border - the radius' :' 50% ', 'background - color:' red '}"
V - show="show"

@ before - enter="beforeEnter2
"@ enter="enter2"
@ after - enter="afterEnter2
">

: style="{height: '20 px, width:' 20 px ', 'border - the radius' :' 50% ', 'background - color:' blue '}"
V - if="show"

Var=new vm Vue ({
El: "# app,"
Data: {
Show: false,
},
Methods: {
BeforeEnter: function (el) {
The console. The log (" beforeEnter ");
},
BeforeEnter2: function (el) {
The console. The log (" beforeEnter2 ");
El. Style. The transform="translate" (0, 0).
},
Enter: function (el) {
The console. The log (" enter ");
El. Style. The transform="translate (0300 px)";
},
Enter2: function (el) {
The console. The log (" enter2 ");
El. OffsetWidth;
El. Style. The transform="translate (150 px, 150 px)";
El. Style. The transition="all 1 s ease";
},
AfterEnter: function (el) {
The console. The log (" afterEnter ");
El. Style. The transform="translate (150 px, 150 px)";
El. Style. The transition="all 1 s ease";
},
AfterEnter2: function (el) {
The console. The log (" afterEnter2 ");
},
},
});
</script>

The code above, only the browser to load the page for the first time, the two animation is synchronized; But in the case of not refresh the page, click the button animation is out of sync,
But when I put the code is amended as:

<meta charset="utf-8"/& gt;

<script SRC="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" & gt; </script>
<style>
HTML,
Body {
Padding: 0 px;
margin: 0px;
}
</style>

<body>

@ before - enter="beforeEnter
"@ enter="enter"
@ after - enter="afterEnter
">

: style="{height: '20 px, width:' 20 px ', 'border - the radius' :' 50% ', 'background - color:' red '}"
V - if="show" & lt; ! Here - from v - show to v - if - & gt;

@ before - enter="beforeEnter2
"@ enter="enter2"
@ after - enter="afterEnter2
">

: style="{height: '20 px, width:' 20 px ', 'border - the radius' :' 50% ', 'background - color:' blue '}"
V - if="show"

Var=new vm Vue ({
El: "# app,"
Data: {
Show: false,
},
Methods: {
BeforeEnter: function (el) {
The console. The log (" beforeEnter ");
},
BeforeEnter2: function (el) {
The console. The log (" beforeEnter2 ");
El. Style. The transform="translate" (0, 0).
},
Enter: function (el) {
The console. The log (" enter ");
El. Style. The transform="translate (0300 px)";
},
Enter2: function (el) {
The console. The log (" enter2 ");
El. OffsetWidth;
El. Style. The transform="translate (150 px, 150 px)";
El. Style. The transition="all 1 s ease";
},
AfterEnter: function (el) {
The console. The log (" afterEnter ");
El. Style. The transform="translate (150 px, 150 px)";
El. Style. The transition="all 1 s ease";
},
AfterEnter2: function (el) {
The console. The log (" afterEnter2 ");
},
},
});
</script>

At this point, even if the repeated click the switch button for many times, the two animations are synchronized,
Why the same code in the v - if and v - show two cases show different?