이 글에서는 애니메이션 전환 효과를 달성하기 위한 Vue 요소를 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 공유하고 참고하겠습니다. 편집기를 따라 살펴보겠습니다
1 vue에서 v-show 또는 를 사용할 때 단일 하위 요소를 포함하려면 <code> <transition> 태그를 사용하세요. v-if 가 표시 및 숨기기를 전환하기 전에 먼저 하위 요소와 일치할 수 있는 해당 클래스 스타일이 있는지 확인합니다. <transition> 标签包含着的单个子元素在使用 v-show 或 v-if 切换显示隐藏前，会先判断是否有对应的 class 样式能匹配到该子元素上：
<script src="/public/javascripts/vuejs"></script>
<style>
red {background-color: red; width: 100px; height: 100px;}
redv-leave { margin-top: 50px; }
redv-leave-active { transition: all 3s;}
redv-leave-to { margin-top: 100px; opacity: 0;}
redv-enter { margin-top: 50px; }
redv-enter-active { transition: all 3s;}
redv-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<p id="app">
<transition>
<p class="red" v-show="show"></p>
</transition>
<button v-on:click="change">button</button>
</p>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function(){
thisshow = !thisshow;
}
}
});
</script>
</script>
</body>로그인 후 복사
v-leave 当前元素准备从显示转变成隐藏，在动画开始前添加到元素上，动画一旦开始会立即删除；
v-leave-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
v-leave-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；
事例中，当点击 button，p 并不会马上 display: none， 而是首先设置 v-leave ，下一刻即删除 v-leave ，同时添加 v-leave-active v-leave-to，当 v-leave-active 中的过渡时间执行完成，则删除 v-leave-active v-leave-to，同时添加 display: none。
v-enter 当前元素准备从隐藏转变成显示，在动画开始前添加到元素上，动画一旦开始会立即删除；
v-enter-active 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置过渡的效果；
v-enter-to 在动画过渡过程中，元素一直拥有该样式，直到动画结束则自动删除，用于设置动画最终的效果；
事例中，当点击 button，p 马上清除 display: none， 然后设置 v-enter ，下一刻即删除 v-enter ，同时添加 v-enter-active v-enter-to，当 v-enter-active 中的过渡时间执行完成，则删除 v-enter-active v-enter-to。
2 自定义动画类名：
<script src="/public/javascripts/vuejs"></script>
<style>
red {background-color: red; width: 100px; height: 100px;}
redslide-leave { margin-top: 50px; }
redslide-leave-active { transition: all 3s;}
redslide-leave-to { margin-top: 100px; opacity: 0;}
redslide-enter { margin-top: 50px; }
redslide-enter-active { transition: all 3s;}
redslide-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<p id="app">
<transition name="slide">
<p class="red" v-show="show"></p>
</transition>
<button v-on:click="change">button</button>
</p>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function(){
thisshow = !thisshow;
}
}
});
</script>로그인 후 복사
该效果与上一例效果完全一致的，transition 元素可以使用 name 属性来指定使用的类名前缀，从而代替 v-字段，例如事例中的 name="slide" 使本来的 v-enter 变成了 slide-enter
<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
0% {
margin-left: 10px;
}
100% {
margin-left: 100px;
}
}
red {background-color: red; width: 100px; height: 100px;}
blue {background-color: blue; width: 100px; height: 100px;}
v-leave { margin-top: 50px; }
v-leave-active { transition: all 3s; animation: aslide 5s;}
v-leave-to { margin-top: 100px;}
</style>
<body>
<p id="app">
<transition type="transition" >
<p class="red" v-show="show"></p>
</transition>
<br>
<transition type="animation" >
<p class="blue" v-show="show"></p>
</transition>
<button v-on:click="change">button</button>
</p>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function(){
thisshow = !thisshow;
}
}
});
</script>로그인 후 복사
v-leave 현재 요소는 표시에서 숨김으로 변경될 준비가 되었습니다. 애니메이션이 시작되기 전에 요소에 추가되면 애니메이션이 시작되면 즉시 삭제됩니다.
v-leave-active 애니메이션 전환 과정에서 요소는 항상 이 스타일을 가지며 애니메이션이 시작될 때까지 자동으로 삭제됩니다.
v-leave -to 애니메이션 전환 과정에서 요소는 항상 이 스타일을 가지며 애니메이션이 끝날 때까지 자동으로 삭제됩니다. 애니메이션의 최종 효과를 설정하려면
버튼을 클릭하면 p가 표시되지 않습니다. 즉시 아무것도 표시되지 않지만 v-leave가 먼저 설정되고 v-leave가 다음 순간 삭제됩니다. -leave-active v-leave-to는 v-leave-active의 전환 시간이 완료되면 v-leave-active v-가 삭제되고 표시: 없음이 추가됩니다.
- v-enter 현재 요소는 숨김에서 표시로 변경될 준비가 되어 있습니다. 애니메이션이 시작되기 전에 요소에 추가됩니다.
v-enter-active 동안; 애니메이션 전환 과정에서 요소는 항상 이 스타일이 애니메이션이 끝날 때까지 자동으로 삭제되며 전환 효과를 설정하는 데 사용됩니다.
v-enter-to 애니메이션 전환 과정에서 요소는 항상 다음과 같습니다. 이 스타일은 애니메이션이 끝날 때까지 자동으로 삭제됩니다. 애니메이션의 최종 효과를 설정하는 데 사용됩니다.
이 경우 버튼을 클릭하면 p가 즉시 표시를 지웁니다. v-enter를 설정하고 다음 순간에 v-enter를 삭제하고 v-enter-active v-enter-to를 추가합니다. v -enter-active의 전환 시간이 완료되면 v-enter-active v-enter-to 삭제됩니다. 
2 사용자 정의 애니메이션 클래스 이름: <script src="/public/javascripts/vuejs"></script>
<style>
red {background-color: red; width: 100px; height: 100px;}
v-leave { margin-top: 50px; }
v-leave-active { transition: all 3s;}
v-leave-to { margin-top: 100px;}
</style>
<body>
<p id="app">
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<p class="red" v-show="show"></p>
</transition>
<button v-on:click="change">button</button>
</p>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function() {
thisshow = !thisshow;
consolelog('-----------click---------');
},
beforeEnter: function (el) {
consolelog('beforeEnter:');
},
enter: function (el, done) {
consolelog('enter:');
// done()
},
afterEnter: function (el) {
consolelog('afterEnter:');
},
enterCancelled: function (el) {
consolelog('enterCancelled:');
},
beforeLeave: function (el) {
consolelog('beforeLeave:');
},
leave: function (el, done) {
consolelog('leave:');
done()
},
afterLeave: function (el) {
consolelog('afterLeave:');
},
leaveCancelled: function (el) {
consolelog('leaveCancelled:');
}
}
});
</script>로그인 후 복사
transition 요소는 name 속성을 사용하여 클래스를 지정할 수 있습니다. 이름을 사용하여 v- 필드를 대체합니다. 예를 들어 예제의 name="slide" 는 원래 v-enter <를 만듭니다. /code>는 <code> 슬라이드 입력이 됩니다. 3 전환과 애니메이션을 동시에 사용하는 경우
<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
0% {
margin-left: 10px;
}
100% {
margin-left: 100px;
}
}
red {background-color: red; width: 100px; height: 100px;}
apper { margin-top: 50px; }
apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;}
</style>
<body>
<p id="app">
<transition
appear
appear-class="apper"
appear-active-class="apper-active"
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook" >
<p class="red" ></p>
</transition>
<button v-on:click="change">button</button>
</p>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function() {
thisshow = !thisshow;
consolelog('-----------click---------');
},
customBeforeAppearHook: function (el) {
consolelog('customBeforeAppearHook:');
},
customAppearHook: function (el) {
consolelog('customAppearHook:');
// done()
},
customAfterAppearHook: function (el) {
consolelog('customAfterAppearHook:');
}
}
});
</script>로그인 후 복사
4 자바스크립트 모니터링 애니메이션
<script src="/public/javascripts/vuejs"></script>
<style>
v-enter-active { transition: all 15s;}
v-enter-to { margin-top: 100px;}
v-leave-active { transition: all 15s;}
v-leave-to { margin-top: 10px;}
</style>
<body>
<p id="app">
<p class="show1">
<transition>
<button v-if="show1" @click="show1 = false">on</button>
<button v-else @click="show1 = true">off</button>
</transition>
</p>
<p class="show2">
<transition>
<button v-if="show2" key="on" @click="show2 = false">on</button>
<button v-else key="off" @click="show2 = true">off</button>
</transition>
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
show1: true,
show2: true
}
});
</script>로그인 후 복사
js 이벤트를 사용하면 원래 CSS 애니메이션 전환 효과가 무효화됩니다. 공식 권장 사항은
에 v-bind:css="false"를 설정하면 CSS 애니메이션 이벤트 콜백을 모니터링하고 성능을 향상시키기 위한 vue의 내부 메커니즘이 필요하지 않습니다.
Enter 및 Leave 이벤트는 done 메서드를 수동으로 호출해야 합니다. 그렇지 않으면 이벤트가 이후 이벤트를 호출하지 않지만 다른 이벤트가 시작되면 애니메이션이 취소된 것으로 간주됩니다.
🎜🎜🎜5 페이지 초기화 중 애니메이션: 🎜🎜
<script src="/public/javascripts/vuejs"></script>
<style>
v-enter { margin-left: 100px;}
v-enter-active { transition: all 5s;}
v-enter-to { margin-left: 10px;}
v-leave { margin-left: 10px;}
v-leave-active { transition: all 5s;}
v-leave-to { margin-left: 100px;}
</style>
<body>
<p id="app">
<p class="default">
<transition>
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</p>
<p class="inout">
<transition mode="in-out">
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</p>
<p class="outin">
<transition mode="out-in">
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
});
</script>로그인 후 복사
로그인 후 복사
🎜🎜🎜🎜🎜🎜appear 속성은 초기화 애니메이션을 켜는 것을 나타내며,appear-class 속성은 초기화 전 스타일을 지정하고,appear-active-class 속성은 나타납니다. 초기화 애니메이션 프로세스 스타일을 지정합니다. 🎜🎜🎜🎜전환 애니메이션은 초기화 애니메이션에 적용할 수 없지만 애니메이션 애니메이션은 적용할 수 있습니다. . 🎜🎜🎜🎜🎜6 애니메이션 요소의 핵심 : 🎜🎜
<script src="/public/javascripts/vuejs"></script>
<style>
v-enter { margin-left: 100px;}
v-enter-active { transition: all 2s;}
v-enter-to { margin-left: 10px;}
</style>
<body>
<p id="app">
<transition-group>
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<transition-group tag="ul">
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<button @click="itemspush(itemslength)">add</button>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
items: [0,1]
}
});
</script>로그인 후 복사
로그인 후 복사
🎜🎜🎜🎜show1 왜 애니메이션 효과가 없나요? vue는 전환되는 두 개의 버튼을 동일한 요소로 인식하지만 버튼의 다른 내용만 수정하므로 DOM 요소의 전환은 실제로 페이지에서 발생하지 않습니다. 🎜🎜🎜vue가 이것이 2 다양한 버튼 요소의 경우 각 요소에 대해 서로 다른 키 속성 값을 지정합니다. 🎜🎜🎜🎜7 요소 전환을 위한 애니메이션 모드: 🎜🎜
<script src="/public/javascripts/vuejs"></script>
<style>
v-enter { margin-left: 100px;}
v-enter-active { transition: all 5s;}
v-enter-to { margin-left: 10px;}
v-leave { margin-left: 10px;}
v-leave-active { transition: all 5s;}
v-leave-to { margin-left: 100px;}
</style>
<body>
<p id="app">
<p class="default">
<transition>
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</p>
<p class="inout">
<transition mode="in-out">
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</p>
<p class="outin">
<transition mode="out-in">
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
});
</script>로그인 후 복사
로그인 후 복사
transition 默认是同时执行2个元素的切换动画的，案例中红色的 off 按钮其实是会同时向左移动的，只是因为布局上没有脱离布局流，被 on 按钮顶住，无法移动；
mode="in-out" 可以使切换元素先执行将要显示元素的动画，再执行将要隐藏元素的动画；
mode="out-in" 可以使切换元素先执行将要隐藏元素的动画，再执行将要显示元素的动画；
8 多元素动画：
<script src="/public/javascripts/vuejs"></script>
<style>
v-enter { margin-left: 100px;}
v-enter-active { transition: all 2s;}
v-enter-to { margin-left: 10px;}
</style>
<body>
<p id="app">
<transition-group>
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<transition-group tag="ul">
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<button @click="itemspush(itemslength)">add</button>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
items: [0,1]
}
});
</script>로그인 후 복사
로그인 후 복사
transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素，要想使用多个元素的动画，必须使用 transition-group；
transition-group 默认会在 DOM 里渲染成 span 标签，可使用 tag="ul" 指定渲染成其他标签；
transition-group 必须为每一个子元素指定 key；
8 多元素的位移动画：
<script src="/public/javascripts/vuejs"></script>
<style>
v-move { transition: all 1s; }
</style>
<body>
<p id="app">
<transition-group tag="ul" >
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<button @click="itemsreverse()">reverse</button>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
items: [0,1,2,3]
}
});
</script>로그인 후 복사
transition-group 允许在每个元素移动时，添加 v-move 的样式，移动完成后自动清除该样式；
transition 的属性， transition-group 都有，包括 name enter leave；
위 내용은 Vue 요소에 대한 애니메이션 전환 효과의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
