Vue Transaction 组件 与v-if , v-show冲突的解决办法 (2023-2-23 更新)

Vue Transaction逻辑做的太失败, 让人用起来非常恶心, 终于使用css原生办法实现了. 这里也提醒我们, 不能去死依赖控件提供的样式属性.对于有问题的, 需要自己去重新定义.

一. 出现问题

进入时没有动画效果, 淡出时有动画效果

二. 多次尝试失败的无效办法

1. 使用v-if产生内部控件, 多次重新生成问题, 导致控件数据丢失. 有淡出效果, 但是没有淡入效果. 但是在淡出的瞬间, 恢复, 能有进入的动画效果.
2. 使用v-show, 有淡出效果, 但是没有淡入效果. 不会产生控件数据丢失的问题.
3. 使用style 的display: none;动态控制显示. 结果, 直接丢失了进入和淡出的效果.
4. 使用style 的opacity: 0; opacity: 1; 控制显示. 结果, 同上直接丢失动画效果. 而且虽然看不见, 但是, 控件仍在那里, 挡住了底下的控件.

三. 最终想起css的基础知识, 切换类名

5. 使用class 直接操控 控件的类名, 结果, 直接就实现了, 而且效果非常美观, 也没有了 切换 显/隐 之后, 控件上的定位, 非绑定数据, 滚动条位置 重置的问题.

<div
v-show="new_yunli_chart_data_visible"
:class="[new_yunli_chart_data_anime]"
>
contents....
</div>

// PS: 2023-2-23 Ciaran 修复 opacity 仍然占用位置的问题, 在隐藏之后, 设置display为none;(即v-show="false")
{
    data(){
      show_csv_string: false,
      new_yunli_chart_data_visible: false,
      new_yunli_chart_data_anime: "slide-fade-leave-to slide-fade-enter-from",
    },
    watch: {
      show_csv_string(b_show) {
        if (b_show){
          this.new_yunli_chart_data_visible = true;
          this.new_yunli_chart_data_anime = "slide-fade-leave-to slide-fade-enter-from";
          this.$nextTick(()=>{
            this.new_yunli_chart_data_anime = "slide-fade-enter-to slide-fade-leave-from";
            setTimeout(()=>{
              this.new_yunli_chart_data_anime = "";
            }, 300);
          });
        }
        else {

          this.new_yunli_chart_data_anime = "slide-fade-enter-to slide-fade-leave-from";
          this.$nextTick(()=>{
            this.new_yunli_chart_data_anime = "slide-fade-leave-to slide-fade-enter-from";
            setTimeout(()=>{
              this.new_yunli_chart_data_visible = false;
              this.new_yunli_chart_data_anime = "";
            }, 800);
          });
        }
      },
    }

}

<style lang="less" scoped >

/*
进入和离开动画可以使用不同
持续时间和速度曲线。
*/

.slide-fade-enter-to,
.slide-fade-leave-from {
  transform: translateX(0);
  opacity: 1;
  transition: all 0.3s  ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(200px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

</style>