网站建设实训考试/廊坊seo优化

参考地址：点击

1. vue动画的理解

操作css的trasition或animation vue会给目标元素添加/移除特定的class

2. 基本过渡动画的编码

• 在目标元素外包裹
• 定义class样式

1. 指定过渡样式: transition
2. 指定隐藏时的样式: opacity/其它

3. 过渡的类名

xxx-enter-active: 指定显示的transition
xxx-leave-active:指定隐藏的transition
xxx-enter: 指定隐藏时的样式

<style type="text/css">.demo {font-family: sans-serif;border: 1px solid #eee;border-radius: 2px;padding: 20px 30px;margin-top: 1em;margin-bottom: 40px;user-select: none;overflow-x: auto;
}
</style>
<div id="demo"><button @click="show = !show">Toggle</button><transition name="xxx"><p v-show="show">hello</p></transition>
</div><hr>
<div id="demo2"><button @click="show = !show">Toggle2</button><transition name="move"><p v-show="show">hello</p></transition>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">const AttributeBindingApp = {data(){return {show: true}}
}const AttributeBindingApp1 = {data(){return {show: true}}
}Vue.createApp(AttributeBindingApp).mount('#demo')Vue.createApp(AttributeBindingApp1).mount('#demo2')</script>

样式二

 <style>.bounce-enter-active {animation: bounce-in .5s;}.bounce-leave-active {animation: bounce-in .5s reverse;}@keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);}}</style>
<div id="example-2"><button @click="show = !show">Toggle show</button><br><transition name="bounce"><p v-if="show" style="display: inline-block">Lorem</p></transition>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script>new Vue({el: '#example-2',data: {show: true}})
</script>