七亿少女的劫丨
效果gif：
代码：
1.引入velocity.min.js
<!-- velocity JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
2.引入vue.min.js
<!-- vue JavaScript -->
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
3.body
<body>
<div class="container">
<div id="app">
<button @click="show = !show" class="btn btn-primary ">{{msg}}</button><br>
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
<img src="pic.png" alt="" v-if="show">
</transition>
</div>
</div>
</body>
4.JavaScript
<script>
new Vue({
el: '#app',
data: {
show: false,
msg: "动画Enter"
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, {
opacity: 1,
width: '120 px'
}, {
duration: 800
})
Velocity(el, {
width: '160 px'
}, {
complete: done
})
this.msg = "动画Leave"
},
leave: function (el, done) {
Velocity(el, {
translateX: '15px',
rotateZ: '50deg'
}, {
duration: 800
})
Velocity(el, {
rotateZ: '100deg'
}, {
loop: 2
})
Velocity(el, {
rotateZ: '45deg',
translateY: '60px',
translateX: '60px',
opacity: 0
}, {
complete: done
})
this.msg = "动画Enter"
}
}
})
</script>
ps：必须引入velocity1.2.3版本，新版本无法适用
![vue项目：npm打包-S和-D区别：[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)