javascript 有没有一种方法可以只使用svelte过渡来缩放X？

z6psavjg 于 2023-03-11 发布在 Java

关注(0)|答案(1)|浏览(99)

所以我想创建一个过渡，当我的元素将退出时，我只想过渡到scaleX（从1到0），因为我知道在svelt中有一个缩放过渡，但它缩放了整个元素。
下面是我现在使用缩放过渡的方法：

{#if show}
    <div out:scale="{{duration: 1000}}" data-title="picture portfolio" data-scroll-speed="1">
      <img
        on:click={transition}
        on:keydown={transition}
        src="pictures/portfolioPicture/landing.png"
        alt="photography portfolio landing"
      />
    </div>
  {/if}

在JS中，我只需要切换show变量。欢迎任何帮助：）

JavaScript

来源：https://stackoverflow.com/questions/75688589/is-there-a-way-to-only-scalex-with-svelte-transition

1条答案

按热度按时间

qvtsj1bj1#

您可以编写自定义转换-输入输出转换t从1运行到0
REPL

<script>
    import { cubicOut } from 'svelte/easing';
    
    let show = true
    
    function customScale(node, options) {
        return {
            duration: options.duration,
            easing: cubicOut,
            css: t => `transform:scaleX(${t}); transform-origin: top left;`
        }
    }   
</script>

<button on:click={() => show = !show}>
  toggle show
</button>

{#if show}
<div out:customScale="{{duration: 1000}}" data-title="picture portfolio" data-scroll-speed="1">
    <img src="https://pbs.twimg.com/profile_images/1121395911849062400/7exmJEg4_400x400.png"
             alt="photography portfolio landing"
             />
</div>
{/if}

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 有没有一种方法可以只使用svelte过渡来缩放X？

1条答案

相关问题

热门标签

最新问答