Vue.js 动画与过渡效果实战




<template>
  <div id="app">
    <transition name="fade">
      <img v-if="show" key="logo" src="./assets/logo.png">
    </transition>
    <button @click="show = !show">Toggle Image</button>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      show: true
    }
  }
}
</script>
 
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>

这个例子展示了如何在Vue.js应用中使用过渡效果。通过点击按钮来切换一个图片的显示与隐藏，并且在这个过程中应用了一个淡入淡出的过渡效果。这个例子简单明了，并且教会了开发者如何在Vue.js中使用过渡。

Vue.js 动画与过渡效果实战

评论已关闭

推荐阅读