taro [使用vue3 transition标签] 微信小程序

7gs2gvoe 于 4个月前发布在其他

关注(0)|答案(6)|浏览(86)

复现步骤

<template>
  <button @click="show = !show">Toggle</button>
  <Transition name="fade">
    <p class="transition-duration-0.3s" v-show="show">hello</p>
  </Transition>
</template>
<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
</style>

<script>
  const show = ref(false);
</script>

期望结果

淡入淡出

实际结果

只有淡入没有淡出

环境信息

Taro CLI 3.6.17 environment info:
    System:
      OS: macOS 14.0
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v20.5.1/bin/yarn
      npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.17 => 3.6.17 
      @tarojs/components: 3.6.17 => 3.6.17 
      @tarojs/helper: 3.6.17 => 3.6.17 
      @tarojs/plugin-framework-vue3: 3.6.17 => 3.6.17 
      @tarojs/plugin-html: ^3.6.17 => 3.6.17 
      @tarojs/plugin-platform-alipay: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-h5: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-jd: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-qq: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-swan: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-tt: 3.6.17 => 3.6.17 
      @tarojs/plugin-platform-weapp: 3.6.17 => 3.6.17 
      @tarojs/runtime: 3.6.17 => 3.6.17 
      @tarojs/shared: 3.6.17 => 3.6.17 
      @tarojs/taro: 3.6.17 => 3.6.17 
      @tarojs/taro-loader: 3.6.17 => 3.6.17 
      @tarojs/webpack5-runner: 3.6.17 => 3.6.17 
      babel-preset-taro: 3.6.17 => 3.6.17 
      eslint-config-taro: 3.6.17 => 3.6.17

taro

来源：https://github.com/NervJS/taro/issues/14672

6条答案

按热度按时间

wd2eg0qa1#

如果用style行内样式正常用unocss 有异常不清楚怎么引发的

赞(0）回复(0）举报 4个月前

zzoitvuj2#

@jc840031139 参考这里试试：https://docs.taro.zone/docs/vue-overall#%E5%85%BC%E5%AE%B9-transition

赞(0）回复(0）举报 4个月前

jv4diomz3#

@jc840031139 参考这里试试：https://docs.taro.zone/docs/vue-overall#%E5%85%BC%E5%AE%B9-transition

不知道是不是更新taro cli版本我现在是入场失去过度动画出场有

赞(0）回复(0）举报 4个月前

r7s23pms4#

👽 Taro v3.6.19

  Taro CLI 3.6.19 environment info:
    System:
      OS: macOS 14.1.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v20.5.1/bin/yarn
      npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.19 => 3.6.19 
      @tarojs/components: 3.6.19 => 3.6.19 
      @tarojs/helper: 3.6.19 => 3.6.19 
      @tarojs/plugin-framework-vue3: 3.6.19 => 3.6.19 
      @tarojs/plugin-html: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-alipay: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-h5: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-jd: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-qq: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-swan: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-tt: 3.6.19 => 3.6.19 
      @tarojs/plugin-platform-weapp: 3.6.19 => 3.6.19 
      @tarojs/runtime: 3.6.19 => 3.6.19 
      @tarojs/shared: 3.6.19 => 3.6.19 
      @tarojs/taro: 3.6.19 => 3.6.19 
      @tarojs/taro-loader: 3.6.19 => 3.6.19 
      @tarojs/webpack5-runner: 3.6.19 => 3.6.19 
      babel-preset-taro: 3.6.19 => 3.6.19 
      eslint-config-taro: 3.6.19 => 3.6.19

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <Transition name="fade">
      <p style="transition-duration: 1s" v-show="show">hello</p>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const show = ref(false);
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

赞(0）回复(0）举报 4个月前

cidc1ykv5#

您这边可以试一下这个代码可以直接跑起来的连续点击是正常的但是一下一下的点就会出现不显示过度的情况

赞(0）回复(0）举报 4个月前

laik7k3q6#

我降到 3.6.18 恢复正常

赞(0）回复(0）举报 4个月前