Vue2-动画

买米当卡思思酱

已于 2024-07-17 14:40:42 修改

阅读量144

点赞数 1

文章标签： javascript

于 2024-07-10 15:26:04 首次发布

本文链接：https://blog.csdn.net/yulingpan123/article/details/140324293

版权

1.transition过渡 | 用transition CSS做动画

Vue-transition文档：进入/离开 & 列表过渡 — Vue.js

[用transition做CSS动画]Enter状态：JS Bin - Collaborative JavaScript Debugging

Leave状态：JS Bin - Collaborative JavaScript Debugging

2. animation过渡 | 用 animation 和三方库 CSS做动画

用animation做CSS动画： JS Bin - Collaborative JavaScript Debugging

引用第三方库CSS动画：Animate.css | A cross-browser library of CSS animations.

[三方库动画]JS Bin - Collaborative JavaScript Debugging

3.JavaScript钩子过渡 | 用 JavaScript钩子和三方库做动画

JS动画三方库Velocity.js ：Velocity.js

transition中使用v-on监听JS钩子的dom动画事件，配合三方库JS动画函数，实现JS钩子做动画的效果。

4.多元素过渡

多元素动画-轮播：JS Bin - Collaborative JavaScript Debugging

##思路:
#多个单元素-绑定不同key做过渡
#动态组件-变量绑定实现多元素动画

/* HTML -轮播效果 */
<body>
  <div id="example-4">
  <!-- /* transition默认 进入/离开 同时发生,mode过渡模式动画依次执行 */ -->
  <transition name="fade" mode="out-in">
    
    <!-- /* 相同标签名需要用不同key值进行区分 */ -->
    <button v-if="status === 'on'" key="on"
            @click="status = 'off'">on</button>
    <button v-else key="off"
            @click="status = 'on'">off</buttun>
</transition>
</div>
</body>

/* CSS */
.fade-enter-active,
.fade-leave-active{
  transition: all 1s
}
.fade-enter{
  opacity: 0.1
  transform: translateX(100px)
}
.fade-leave-to{
   opacity: 0;
   transform: translateX(-100px)
}
#example-4{
  position: relative;
  padding: 100px
}
button{
  position: absolute;
}

/* JS */
new Vue({
  el:"#example-4",
  data:{
    status: "on"
  }
})