vue Transition动画使用

来源:互联网 发布:java反射 在什么场景用 编辑:程序博客网 时间:2024/05/29 13:36
<div id="example-1" class="demo">  <button @click="show = !show">    Toggle render  </button>  <transition name="slide-fade">    <p v-if="show">hello</p>  </transition></div><script>new Vue({  el: '#example-1',  data: {    show: true  }})</script><style>.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>

具体参考文档:
https://cn.vuejs.org/v2/guide/transitions.html#CSS-过渡

原创粉丝点击