1. 效果 (10_过渡&动画/test.html)
10_过渡&动画1.g if
10_过渡&动画2.g if
2. vue 动画的理解
1) 操作 css 的 trasition 或 animation 2) vue 会给目标元素添加/移除特定的 class 3) 过渡的相关类名 xxx-enter-active: 指定显示的 transition xxx-leave-active: 指定隐藏的 transition xxx-enter/xxx-leave-to: 指定隐藏时的样式
3. 基本过渡动画的编码
1) 在目标元素外包裹<transitionname=”xxx”> 2) 定义 class 样式 指定过渡样式:transition 指定隐藏时的样式:opacity/其它
4. 编码 1
<style> .fade-enter-active, .fade-leave-active { transition: opacity .5s }
.fade-enter, .fade-leave-to { opacity: 0 }
/*
可 以 设 置 不 同 的 进 入 和 离 开 动 画
*/
.slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to { transform: translateX(10px); opacity: 0; } </style>
<div id=”demo1″> <button @click=”show = !show”> Toggle1 </button> <transition name=”fade”> <p v-if=”show”>hello</p> </transition>
</div>
<div id=”demo2″> <button @click=”show = !show”> Toggle2 </button> <transition name=”slide-fade”> <p v-if=”show”>hello</p> </transition> </div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> new Vue({ el: ‘#demo1’, data: { show: true } })
new Vue({ el: ‘#demo2’, data: { show: true } }) </script>
1.11.5. 编码 2
<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=”test2″> <button @click=”show = !show”>Toggle show</button> <br> <transition name=”bounce”> <p v-if=”show” style=”display: inline-block”>Look at me!</p> </transition> </div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script> new Vue({ el: ‘#test2’, data: { show: true } }) </script>
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 大数据培训课程Hadoop（HDFS)之CheckPoint时间设置
下一篇: 前端培训Vue之过滤器
