vue 过渡效果

最新推荐文章于 2024-10-04 00:46:18 发布

世俗ゝ

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量169

点赞数

文章标签： vue.js html html5 css javascript

本文链接：https://blog.csdn.net/wangongchao/article/details/105945508

版权

本文详细探讨了Vue.js中的过渡效果，包括如何使用内置的transition组件实现元素的进入和离开动画，以及结合CSS动画和JavaScript钩子函数创建复杂的过渡效果。内容涵盖了HTML、CSS和JavaScript在Vue过渡中的应用。

摘要由CSDN通过智能技术生成

1.首先
在路由中配置，添加一个属性
这句话放在哪个地方都行
VueRouter.prototype.goBack = function() {
   
  this.isBack = true
  window.history.go(-1)
}

2.然后app.vue中
    <transition :name="transitionName">
          <router-view class="Router"></router-view>
      </transition>
<script>
      export default {
   
          data() {
   
               return {
   
                   transitionName: ''
               }
           },
             watch: {
   
                  $route(to, from) {
   
                      let isBack = this