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

7gs2gvoe  于 5个月前  发布在  其他
关注(0)|答案(6)|浏览(116)

相关平台

微信小程序

小程序基础库: 最新
使用框架: React

复现步骤

  1. <template>
  2. <button @click="show = !show">Toggle</button>
  3. <Transition name="fade">
  4. <p class="transition-duration-0.3s" v-show="show">hello</p>
  5. </Transition>
  6. </template>
  7. <style>
  8. .fade-enter-active,
  9. .fade-leave-active {
  10. transition: opacity 0.5s ease;
  11. }
  12. .fade-enter-from,
  13. .fade-leave-to {
  14. opacity: 0;
  15. }
  16. </style>
  17. <script>
  18. const show = ref(false);
  19. </script>

期望结果

淡入淡出

实际结果

只有淡入没有淡出

环境信息

  1. Taro CLI 3.6.17 environment info:
  2. System:
  3. OS: macOS 14.0
  4. Shell: 5.9 - /bin/zsh
  5. Binaries:
  6. Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
  7. Yarn: 1.22.19 - ~/.nvm/versions/node/v20.5.1/bin/yarn
  8. npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
  9. npmPackages:
  10. @tarojs/cli: 3.6.17 => 3.6.17
  11. @tarojs/components: 3.6.17 => 3.6.17
  12. @tarojs/helper: 3.6.17 => 3.6.17
  13. @tarojs/plugin-framework-vue3: 3.6.17 => 3.6.17
  14. @tarojs/plugin-html: ^3.6.17 => 3.6.17
  15. @tarojs/plugin-platform-alipay: 3.6.17 => 3.6.17
  16. @tarojs/plugin-platform-h5: 3.6.17 => 3.6.17
  17. @tarojs/plugin-platform-jd: 3.6.17 => 3.6.17
  18. @tarojs/plugin-platform-qq: 3.6.17 => 3.6.17
  19. @tarojs/plugin-platform-swan: 3.6.17 => 3.6.17
  20. @tarojs/plugin-platform-tt: 3.6.17 => 3.6.17
  21. @tarojs/plugin-platform-weapp: 3.6.17 => 3.6.17
  22. @tarojs/runtime: 3.6.17 => 3.6.17
  23. @tarojs/shared: 3.6.17 => 3.6.17
  24. @tarojs/taro: 3.6.17 => 3.6.17
  25. @tarojs/taro-loader: 3.6.17 => 3.6.17
  26. @tarojs/webpack5-runner: 3.6.17 => 3.6.17
  27. babel-preset-taro: 3.6.17 => 3.6.17
  28. eslint-config-taro: 3.6.17 => 3.6.17
wd2eg0qa

wd2eg0qa1#

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

zzoitvuj

zzoitvuj2#

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

jv4diomz

jv4diomz3#

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

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

r7s23pms

r7s23pms4#

  1. 👽 Taro v3.6.19
  2. Taro CLI 3.6.19 environment info:
  3. System:
  4. OS: macOS 14.1.1
  5. Shell: 5.9 - /bin/zsh
  6. Binaries:
  7. Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
  8. Yarn: 1.22.19 - ~/.nvm/versions/node/v20.5.1/bin/yarn
  9. npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
  10. npmPackages:
  11. @tarojs/cli: 3.6.19 => 3.6.19
  12. @tarojs/components: 3.6.19 => 3.6.19
  13. @tarojs/helper: 3.6.19 => 3.6.19
  14. @tarojs/plugin-framework-vue3: 3.6.19 => 3.6.19
  15. @tarojs/plugin-html: 3.6.19 => 3.6.19
  16. @tarojs/plugin-platform-alipay: 3.6.19 => 3.6.19
  17. @tarojs/plugin-platform-h5: 3.6.19 => 3.6.19
  18. @tarojs/plugin-platform-jd: 3.6.19 => 3.6.19
  19. @tarojs/plugin-platform-qq: 3.6.19 => 3.6.19
  20. @tarojs/plugin-platform-swan: 3.6.19 => 3.6.19
  21. @tarojs/plugin-platform-tt: 3.6.19 => 3.6.19
  22. @tarojs/plugin-platform-weapp: 3.6.19 => 3.6.19
  23. @tarojs/runtime: 3.6.19 => 3.6.19
  24. @tarojs/shared: 3.6.19 => 3.6.19
  25. @tarojs/taro: 3.6.19 => 3.6.19
  26. @tarojs/taro-loader: 3.6.19 => 3.6.19
  27. @tarojs/webpack5-runner: 3.6.19 => 3.6.19
  28. babel-preset-taro: 3.6.19 => 3.6.19
  29. eslint-config-taro: 3.6.19 => 3.6.19
  1. <template>
  2. <div>
  3. <button @click="show = !show">Toggle</button>
  4. <Transition name="fade">
  5. <p style="transition-duration: 1s" v-show="show">hello</p>
  6. </Transition>
  7. </div>
  8. </template>
  9. <script setup lang="ts">
  10. import { ref } from 'vue';
  11. const show = ref(false);
  12. </script>
  13. <style>
  14. .fade-enter-active,
  15. .fade-leave-active {
  16. transition: opacity 0.5s ease;
  17. }
  18. .fade-enter-from,
  19. .fade-leave-to {
  20. opacity: 0;
  21. }
  22. </style>
展开查看全部
cidc1ykv

cidc1ykv5#

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

laik7k3q

laik7k3q6#

我降到 3.6.18 恢复正常

相关问题