Question

我遇到一个问题，浏览器不知道变换原点更改为dom元素，或者更好地说它知道但有延迟。

我有一个占位符，我希望在点击时缩放。我有这段代码，我计算点击元素中心并将变换原点应用于变换元素。

cmake_minimum_required (VERSION 2.8.11)

set (INSTALL_BIN_DIR "" CACHE PATH "full binary path")
set (INSTALL_LIB_DIR "$ENV{HOME}/embedded/llib/lib" CACHE PATH "full binary path")
set (INSTALL_INCLUDE_DIR "$ENV{HOME}/embedded/llib/include" CACHE PATH "full include path")
set (SRC_DIR "src" CACHE PATH "Source files path")
set (H_DIR  "include" CACHE PATH "Source files path")

set (C_FILES )
list (
    APPEND C_FILES
    ${SRC_DIR}/dict.c
    )

set (H_FILES )
list (
    APPEND H_FILES
    ${H_DIR}/dict.h
    )


# Define Project name
project (dict)

set (CMAKE_FIND_LIBRARY_SUFFIXES_BKP ${CMAKE_FIND_LIBRARY_SUFFIXES})
# Set lib version to be used
set (CMAKE_FIND_LIBRARY_SUFFIXES ".so.1")

find_library (
    CJSON_LIB 
    NAMES cJSON 
    PATHS ${INSTALL_LIB_DIR}
    )
set (CMAKE_FIND_LIBRARY_SUFFIXES ${CMAKE_FIND_LIBRARY_SUFFIXES_BKP})

message ("cJSON_lib: ${CJSON_LIB}")

# Create a library called "cJSON" which includes the source and header files.
add_library (dict SHARED "${C_FILES}" ${CJSON_LIB})

include_directories (${H_DIR} ${INSTALL_INCLUDE_DIR})
# Make sure the compiler can find include files for our Hello library
# when other libraries or executables link to Hello
#target_include_directories (cJSON PUBLIC ${CMAKE_CURRENT_SOURCE_DIR})

set_target_properties (dict 
                        PROPERTIES 
                            VERSION 1.0 SOVERSION 1
                            PUBLIC_HEADER "${H_FILES}"
                    )

install(TARGETS dict 
# IMPORTANT: Add the foo library to the "export-set"
  EXPORT DictTargets
  LIBRARY
  RUNTIME DESTINATION "${INSTALL_BIN_DIR}" COMPONENT bin
  LIBRARY DESTINATION "${INSTALL_LIB_DIR}" COMPONENT shlib
  PUBLIC_HEADER DESTINATION "${INSTALL_INCLUDE_DIR}" COMPONENT dev
  )

接下来发生的事情是浏览器开始缩放到变换原点：50％50％并且在动画中间它转移到正确的变换原点位置。

如果我在应用transform-origin后500毫秒应用缩放，则动画可以正常工作。

此代码可以顺利运行：

$(".place-holder")
        .css({
            "-webkit-transform-origin":transCenterY+"px "+transCenterX+"px",
            "transform-origin":transCenterY+"px "+transCenterX+"px",
            "transform":"scale(2)"
        });

这是小提琴，所以你可以看到发生了什么： https://jsfiddle.net/r9xboa1b/

点击红色方块 - 看看过渡期间的转变？您只能单击一次，然后再次运行小提琴。

如果你在超时时间应用比例，那么转变就会消失。

修改

我真正希望实现的是平滑过渡到每个方格的中心而不会移位且没有超时。 https://jsfiddle.net/r9xboa1b/

Answer 1

我解决了这个问题。

诀窍是，我将过渡应用于元素上的所有变换。因此，变换原点的变化也在过渡1s - 这解释了动画的转变。

所以改变

transition:all 1s;

到

transition:transform 1s;

做了这个伎俩。

对于遇到此问题的其他人 - 仅将转换应用于您需要的转换属性。

转换原点更改延迟

1 个答案: