如何在小屏幕设备上应用不同的transition过渡效果？

核心思路 #

通过监听窗口宽度变化，动态为目标元素切换不同的过渡类（或在框架中绑定不同的过渡名称），从而实现不同断点下的完全不同过渡效果。

原生JavaScript实现 #

步骤1：定义两种过渡的CSS类 #

/* 默认fly过渡 */
.fly-transition {
  transition: transform 0.5s ease;
  transform: translateX(0);
}
.fly-transition.enter {
  transform: translateX(100%);
}
.fly-transition.enter-active {
  transform: translateX(0);
}
.fly-transition.leave {
  transform: translateX(0);
}
.fly-transition.leave-active {
  transform: translateX(-100%);
}

/* 小屏fade过渡 */
.fade-transition {
  transition: opacity 0.3s ease;
  opacity: 1;
}
.fade-transition.enter {
  opacity: 0;
}
.fade-transition.enter-active {
  opacity: 1;
}
.fade-transition.leave {
  opacity: 1;
}
.fade-transition.leave-active {
  opacity: 0;
}

步骤2：JS监听窗口大小并切换类 #

const targetElement = document.getElementById('transition-target');

// 切换过渡类的逻辑
function updateTransition() {
  if (window.innerWidth < 600) {
    targetElement.classList.replace('fly-transition', 'fade-transition');
  } else {
    targetElement.classList.replace('fade-transition', 'fly-transition');
  }
}

// 初始化执行
updateTransition();
// 监听窗口 resize 事件
window.addEventListener('resize', updateTransition);

Vue3 框架实现 #

利用Vue的Transition组件动态绑定name属性，结合窗口宽度监听实现切换：

<template>
  <Transition :name="transitionName">
    <div v-if="showContent" class="content">
      <!-- 自定义内容 -->
    </div>
  </Transition>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const showContent = ref(true);
const transitionName = ref('fly');
const windowWidth = ref(window.innerWidth);

// 更新过渡类型
function updateTransition() {
  transitionName.value = windowWidth.value < 600 ? 'fade' : 'fly';
}

onMounted(() => {
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    windowWidth.value = window.innerWidth;
  });
  updateTransition();
});

// 监听窗口宽度变化自动更新过渡
watch(windowWidth, updateTransition);
</script>

<style scoped>
/* fly过渡样式 */
.fly-enter-from { transform: translateX(100%); }
.fly-enter-active, .fly-leave-active { transition: transform 0.5s ease; }
.fly-leave-to { transform: translateX(-100%); }

/* fade过渡样式 */
.fade-enter-from, .fade-leave-to { opacity: 0; }
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
</style>

React 框架实现（结合react-transition-group） #

通过useState管理过渡类型，useEffect监听窗口大小变化：

import { useState, useEffect } from 'react';
import { CSSTransition } from 'react-transition-group';

function ResponsiveTransition() {
  const [showContent, setShowContent] = useState(true);
  const [transitionType, setTransitionType] = useState('fly');

  useEffect(() => {
    const updateTransition = () => {
      setTransitionType(window.innerWidth < 600 ? 'fade' : 'fly');
    };

    // 初始化设置
    updateTransition();
    // 监听窗口resize
    window.addEventListener('resize', updateTransition);

    // 清理监听
    return () => window.removeEventListener('resize', updateTransition);
  }, []);

  return (
    <CSSTransition
      in={showContent}
      timeout={transitionType === 'fly' ? 500 : 300}
      classNames={transitionType}
      unmountOnExit
    >
      <div className="content">
        {/* 自定义内容 */}
      </div>
    </CSSTransition>
  );
}

export default ResponsiveTransition;

对应的全局CSS：

/* fly过渡 */
.fly-enter { transform: translateX(100%); }
.fly-enter-active {
  transform: translateX(0);
  transition: transform 500ms ease;
}
.fly-exit { transform: translateX(0); }
.fly-exit-active {
  transform: translateX(-100%);
  transition: transform 500ms ease;
}

/* fade过渡 */
.fade-enter { opacity: 0; }
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease;
}
.fade-exit { opacity: 1; }
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease;
}

内容的提问来源于stack exchange，提问作者Johnny _JTH